@extends('tenants.layouts.master')

@section('title')
    @lang(!empty($edit_list) ? 'Edit Cost Code' : 'Add Cost Code')
@endsection

@section('css')
    <link href="{{ url('css/Select2_cdn/select2.min.css') }}" rel="stylesheet" />
@endsection

@section('content')
    @component('tenants.components.breadcrumb')
        @slot('li_1') Cost Code @endslot
        @slot('title') {{ !empty($edit_list) ? 'Edit' : 'Add' }} Cost Code @endslot
    @endcomponent

    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <form action="{{ route('cost-code.store') }}" method="POST" id="costcodeForm" enctype="multipart/form-data">
                        @csrf

                        <div id="errors" class="alert alert-danger d-none"></div> <!-- Error Messages -->

                        <div class="form-group">
                            <label for="cost_code_name">Cost Code Name:</label>
                            <input type="text" id="cost_code_name" name="cost_code_name" class="form-control" required>
                        </div>

                        <div class="form-group">
                            <label for="costcode_code">Cost Code:</label>
                            <input type="text" id="costcode_code" name="costcode_code" class="form-control" required>
                        </div>

                        <div class="form-group">
                            <label for="description">Description:</label>
                            <textarea id="description" name="description" class="form-control"></textarea>
                        </div>

                        <button type="submit" class="btn btn-primary mt-3">Submit</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="{{ url('js/jquery-3.6.0_cdn/jquery.min.js') }}"></script>
    <script src="{{ url('js/select2@4.1.0/select2.min.js') }}"></script>
    <script src="{{ url('js/select2.init.js') }}"></script>
    <script src="https://cdn.rawgit.com/jzaefferer/jquery-validation/1.19.3/dist/jquery.validate.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="{{ url('js/pages/form-pickers.init.js') }}"></script>
    <script src="{{ url('js/libs/@simonwep/pickr/pickr.min.js') }}"></script>

    <script>
        $(document).ready(function () {
            $('#costcodeForm').on('submit', function (e) {
                e.preventDefault(); 

                let form = $(this);
                let formData = form.serialize();
                let submitButton = form.find('button[type="submit"]');

                // Disable button to prevent multiple clicks
                submitButton.prop('disabled', true).text('Submitting...');

                $('#errors').addClass('d-none').html('');

                $.ajax({
                    url: form.attr('action'), 
                    method: 'POST',
                    data: formData,
                    success: function (response) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Success!',
                            text: response.success,
                            showConfirmButton: false,
                            timer: 2000
                        }).then(() => {
                            window.location.href = "{{ route('cost-code.index') }}";
                        });
                    },
                    error: function (xhr) {
                        let errors = xhr.responseJSON?.errors;
                        let errorHtml = '';

                        if (errors) {
                            $.each(errors, function (key, value) {
                                errorHtml += '<p>' + value[0] + '</p>';
                            });
                            $('#errors').removeClass('d-none').html(errorHtml);
                        } else {
                            $('#errors').removeClass('d-none').html('<p>Something went wrong. Please try again.</p>');
                        }
                    },
                    complete: function () {
                        submitButton.prop('disabled', false).text('Submit');
                    }
                });
            });
        });
    </script>
@endsection