@extends('layouts.app')
@section('content')
    <div class="page-wrapper">
        <div class="page-content">

            <div class="row">
                <div class="col-xl-8 mx-auto">
                    <h6 class="mb-0 text-uppercase">Company Information</h6>
                    <hr />
                    <div class="card border-top border-0 border-4 border-primary">
                        <div class="card-body">
                            <form class="row g-2" action="{{ route('company.store') }}" method="POST" id="ajax_form_data"
                                enctype="multipart/form-data">
                                @csrf
                                <div class="col-md-6">
                                    <label for="inputFirstName" class="form-label">Name of Company</label>
                                    <input type="text" class="form-control" placeholder="Name of Company"
                                        name="company_name" value="{{ $item->company_name }}">
                                </div>
                                <div class="col-md-6">
                                    <label for="inputLastName" class="form-label">Owner Name</label>
                                    <input type="text" class="form-control" placeholder="Owner Name" name="owner_name"
                                        value="{{ $item->owner_name }}">
                                </div>
                                <div class="col-md-6">
                                    <label for="inputEmail" class="form-label">GST Number</label>
                                    <input type="text" class="form-control" placeholder="GST Number" name="gst_number"
                                        value="{{ $item->gst_number }}">
                                </div>
                                <div class="col-md-6">
                                    <label for="inputEmail" class="form-label">IGST Number</label>
                                    <input type="text" class="form-control" placeholder="IGT Number" name="igt_number"
                                        value="{{ $item->igt_number }}">
                                </div>
                                <div class="col-md-6">
                                    <label for="inputEmail" class="form-label">VAT Number</label>
                                    <input type="text" class="form-control" placeholder="VAT Number" name="vat_Number"
                                        value="{{ $item->vat_Number }}">
                                </div>
                                <div class="col-md-6">
                                    <label for="inputEmail" class="form-label">License Number</label>
                                    <input type="text" class="form-control" placeholder="License Number"
                                        name="license_number" value="{{ $item->license_number }}">
                                </div>
                                <div class="col-md-6">
                                    <label for="inputEmail" class="form-label">TAX No</label>
                                    <input type="text" class="form-control" placeholder="TAX No" name="tax_No"
                                        value="{{ $item->tax_No }}">
                                </div>
                                <div class="col-md-6">
                                    <label for="inputEmail" class="form-label">Country</label>
                                    <select id="country_id" name="country_id" class="form-select form-control selectpicker"
                                        aria-label="Default select example" data-live-search="true">
                                        <option value="" selected>Choose</option>
                                        @foreach ($countries as $country)
                                            <option value="{{ $country->id }}"
                                                {{ $item->country_id == $country->id ? 'selected' : '' }}>
                                                {{ Str::ucfirst($country->name) }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label for="inputEmail" class="form-label">State</label>
                                    <select id="state_id" name="state_id" class="form-select form-control selectpicker"
                                        aria-label="Default select example" data-live-search="true">
                                        <option value="" selected>Choose...</option>
                                        @foreach ($states as $state)
                                            <option
                                                value="{{ $state->id }}"{{ $item->state_id == $state->id ? 'selected' : '' }}>
                                                {{ Str::ucfirst($state->name) }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label for="inputEmail" class="form-label">City</label>
                                    <select id="city_id" name="city_id" class="form-select form-control selectpicker"
                                        aria-label="Default select example" data-live-search="true">
                                        <option value="" selected>Choose...</option>
                                        @foreach ($cities as $city)
                                            <option value="{{ $city->id }}"
                                                {{ $item->city_id == $city->id ? 'selected' : '' }}>
                                                {{ Str::ucfirst($city->name) }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-12">
                                    <label for="inputEmail" class="form-label">Address</label>
                                    <textarea class="form-control" name="address" cols="30" rows="2">{{ $item->address }}</textarea>
                                </div>
                                <div class="col-md-6">
                                    <label for="inputEmail" class="form-label">Default currency</label>
                                    <select name="currency_id" class="form-select form-control selectpicker"
                                        aria-label="Default select example" data-live-search="true">
                                        <option value="" selected>Choose</option>
                                        @foreach ($currencies as $currency)
                                            <option value="{{ $currency->id }}"
                                                {{ $item->currency_id == $currency->id ? 'selected' : '' }}>
                                                {{ Str::ucfirst($currency->name) }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label for="inputEmail" class="form-label">Date Format</label>
                                    <select name="date_format" class="form-select">
                                        <option value="" selected>Choose...</option>
                                        <option value="DD-MM-YYYY"
                                            {{ $item->date_format == 'DD-MM-YYYY' ? 'selected' : '' }}>
                                            (DD-MM-YYYY hh:mm AM/PM)</option>
                                        <option value="YYYY-MM-DD"
                                            {{ $item->date_format == 'YYYY-MM-DD' ? 'selected' : '' }}>
                                            (YYYY-MM-DD hh:mm AM/PM)</option>
                                        <option value="DD.MM.YYYY"
                                            {{ $item->date_format == 'DD.MM.YYYY' ? 'selected' : '' }}>
                                            (DD.MM.YYYY hh:mm AM/PM)</option>
                                        <option value="YYYY.MM.DD"
                                            {{ $item->date_format == 'YYYY.MM.DD' ? 'selected' : '' }}>
                                            (YYYY.MM.DD hh:mm AM/PM)</option>
                                        <option value="DD/MM/YYYY"
                                            {{ $item->date_format == 'DD/MM/YYYY' ? 'selected' : '' }}>
                                            (DD/MM/YYYY hh:mm AM/PM)</option>
                                        <option value="YYYY/MM/DD"
                                            {{ $item->date_format == 'YYYY/MM/DD' ? 'selected' : '' }}>
                                            (YYYY/MM/DD hh:mm AM/PM)</option>
                                        <option value="D F, Y" {{ $item->date_format == 'D F, Y' ? 'selected' : '' }}>
                                            (01 January, 2024 hh:mm AM/PM)</option>
                                        <option value="F D, Y" {{ $item->date_format == 'F D, Y' ? 'selected' : '' }}>
                                            (January 01, 2024 hh:mm AM/PM)</option>
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label for="inputEmail" class="form-label">Time Zone</label>
                                    <select name="zone_id" class="form-select form-control selectpicker"
                                        aria-label="Default select example" data-live-search="true">
                                        <option value="" selected>Choose...</option>
                                        @foreach ($timezones as $tz)
                                            <option value="{{ $tz }}" @selected(old('timezone', $item->zone_id) === $tz)>
                                                {{ $tz }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label for="inputEmail" class="form-label">Mobile Number</label>
                                    <input type="tel" name="mobile" class="form-control"
                                        placeholder="Mobile Number" value="{{ $item->mobile }}">
                                </div>
                                <div class="col-md-6">
                                    <label for="inputEmail" class="form-label">Altrenative Mobile
                                        Number</label>
                                    <input type="tel" name="alternative_mobile" class="form-control"
                                        placeholder="Altrenative Mobile Number" value="{{ $item->alternative_mobile }}">
                                </div>
                                <div class="col-md-6">
                                    <label for="inputEmail" class="form-label">Email</label>
                                    <input type="email" name="email" class="form-control" placeholder="Email"
                                        value="{{ $item->email }}">
                                </div>
                                <div class="col-md-6">
                                    <label for="inputEmail" class="form-label">Telephone Number</label>
                                    <input type="tel" name="telephone" class="form-control"
                                        placeholder="Telephone Number" value="{{ $item->telephone }}">
                                </div>
                                <div class="col-md-6">
                                    <label for="inputEmail" class="form-label">Attachment URL</label>
                                    <input type="text" name="attachment_url" class="form-control"
                                        placeholder="Attachment URL" value="{{ $item->attachment_url }}">
                                </div>
                                <div class="col-md-6">
                                    <label for="inputEmail" class="form-label">Website Address</label>
                                    <input type="text" name="website" class="form-control"
                                        placeholder="Website Address" value="{{ $item->website }}">
                                </div>
                                <div class="col-md-6">
                                    <a href="">{{ $item ? $item->document : '' }}</a> <br>
                                    <label for="inputEmail" class="form-label">Document</label>
                                    <input type="file" name="document" class="form-control">
                                </div>
                                <div class="col-md-6">
                                    @if ($item)
                                        <img src="{{ getImage('company', $item->logo) }}" width="80px" height="50px">
                                    @endif
                                    <label for="inputEmail" class="form-label">Company Logo</label>
                                    <input type="file" name="logo" class="form-control">
                                </div>
                                <div class="col-12">
                                    <button type="submit" class="btn btn-primary px-5">Save</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('script')
    <script>
        $(document).ready(function() {
            $(document).on("submit", "#ajax_form", function(e) {
                e.preventDefault();
                // Create a FormData object
                var formData = new FormData(this);

                // Use AJAX to send the form data
                $.ajax({
                    url: $(this).attr('action'),
                    type: "POST",
                    data: formData,
                    contentType: false, // Required for FormData
                    processData: false, // Required for FormData
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(data) {
                        if (data.errors) {
                            var errors = data.errors;
                            $.each(errors, function(field_name, error) {
                                $(document)
                                    .find("[name=" + field_name + "]")
                                    .after(
                                        '<span class="mb-1" style="color:red;font-size:12px !important;">' +
                                        error +
                                        "</span>");
                            });
                        } else if (data.success) {
                            toastr.success(data.success);
                            window.location.reload();
                        }
                    },
                    error: function(xhr) {
                        // Handle any errors returned by the server
                        if (xhr.responseJSON && xhr.responseJSON.errors) {
                            var errors = xhr.responseJSON.errors;
                            $.each(errors, function(field_name, error) {
                                $(document)
                                    .find("[name=" + field_name + "]")
                                    .after(
                                        '<span class="mb-1" style="color:red;font-size:12px !important;">' +
                                        error +
                                        "</span>");
                            });
                        } else {
                            toastr.error('An error occurred. Please try again.');
                        }
                    }
                });
            });
        });

        $(document).ready(function() {
            // Initialize selectpicker
            $('.selectpicker').selectpicker();

            // Handle country change
            $("#country_id").change(function() {
                getState();
            });

            // Handle state change
            $("#state_id").change(function() {
                getCity();
            });
        });

        function getState() {
            var country_id = $("#country_id").val();

            if (country_id) {
                $.ajax({
                    url: "{{ route('state.getState') }}",
                    type: 'POST',
                    dataType: 'html',
                    data: {
                        country_id: country_id,
                        _token: "{{ csrf_token() }}" // Include CSRF token
                    },
                    success: function(data) {
                        $('#state_id').empty();
                        $('#state_id').html('<option value="" selected>Choose...</option>' +
                            data); // Add default empty option
                        $('#state_id').selectpicker('refresh'); // Refresh selectpicker
                        $('#city_id').empty();
                        $('#city_id').html(
                            '<option value="" selected>Choose...</option>'); // Reset city dropdown
                        $('#city_id').selectpicker('refresh');
                    }
                });
            } else {
                // Reset state and city dropdowns if no country is selected
                $('#state_id').empty();
                $('#state_id').html('<option value="" selected>Choose...</option>');
                $('#state_id').selectpicker('refresh');
                $('#city_id').empty();
                $('#city_id').html('<option value="" selected>Choose...</option>');
                $('#city_id').selectpicker('refresh');
            }
        }

        function getCity() {
            var state_id = $("#state_id").val();

            if (state_id) {
                $.ajax({
                    url: "{{ route('city.getCity') }}",
                    type: 'POST',
                    dataType: 'html',
                    data: {
                        state_id: state_id,
                        _token: "{{ csrf_token() }}" // Include CSRF token
                    },
                    success: function(data) {
                        $('#city_id').empty();
                        $('#city_id').html('<option value="" selected>Choose...</option>' +
                            data); // Add default empty option
                        $('#city_id').selectpicker('refresh'); // Refresh selectpicker
                    }
                });
            } else {
                // Reset city dropdown if no state is selected
                $('#city_id').empty();
                $('#city_id').html('<option value="" selected>Choose...</option>');
                $('#city_id').selectpicker('refresh');
            }
        }
    </script>
@endpush