@extends('adminlte::page')

@section('title', 'Dashboard')

@section('content_header')
    <h1>Transporters</h1>
    {{-- <small>Manage Transporters</small> --}}
@stop

@section('content')
    <div class="card card-dark">
        <div class="card-header">
            <h3 class="card-title">Edit Transporters</h3>
        </div>
        {{-- @if (session('error'))
            <h6 class="alert alert-danger">
                {{ session('error') }}
            </h6>
        @endif
        @if ($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif --}}
        <form method="POST" id="edit_user" role="form" action="{{ route('users.update', $user->id) }}"
            class="jqueryValidation" enctype="multipart/form-data">
            @csrf
            @method('PATCH')

            <div class="card-body">
                <div class="form-group row">
                    <div class="col-md-6">
                        <label for="name">First Name</label>
                        <x-adminlte-input class="form-control" id="name" name="name" placeholder="Enter Name"
                            value="{{ old('name') ?? $user->name }}" required />
                    </div>
                    <div class="col-md-6">
                        <label for="last_name">Last Name</label>
                        <x-adminlte-input class="form-control" id="last_name" name="last_name" placeholder="Enter Last Name"
                            value="{{ old('last_name') ?? $user->last_name }}" required />
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-md-6">
                        <label for="email">Email</label>
                        <x-adminlte-input type="email" class="form-control" id="email" name="email"
                            placeholder="Enter Email" value="{{ old('email') ?? $user->email }}" required />
                    </div>
                    <div class="col-md-6">
                        <label for="phone">Phone Number</label>
                        <x-adminlte-input type="number" class="form-control" id="phone" name="phone_number"
                            placeholder="Enter Phone Number" value="{{ old('phone_number') ?? $user->phone_number }}"
                            required />
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-md-6">
                        <label for="whatsapp_number">WhatsApp Number</label>
                        <x-adminlte-input type="number" class="form-control" id="whatsapp_number" name="whatsapp_number"
                            placeholder="Enter Whatsapp Number"
                            value="{{ old('whatsapp_number') ?? ($transporter ? $transporter->whatsapp_number : '') }}"
                            required />
                    </div>
                    <div class="col-md-6">
                        <label for="language">Language</label>
                        <input type="text" name="languages[]" class="form-control" required
                            value='@json($languageValues)' id="languages">
                    </div>
                </div>
                {{-- <div id="language-fields">
                        @if ($languages->isNotEmpty())
                            @foreach ($languages as $index => $language)
                                <div class="form-group row" id="language-field-{{ $index }}">
                                    <div class="col-md-5">
                                        <label for="language">Language</label>
                                        <input type="text" name="languages[{{ $index }}][language]"
                                            class="form-control" value="{{ $language->name }}" required>
                                    </div>
                                    <div class="col-md-5">
                                        <label for="proficient">Proficient</label>
                                        <input type="number" name="languages[{{ $index }}][proficient]"
                                            class="form-control" value="{{ $language->Proficient }}" required min="0"
                                            max="100">
                                    </div>
                                    <div class="col-md-2 d-flex align-items-end">
                                        <button type="button" class="btn btn-danger remove"
                                            data-id="{{ $index }}">Remove</button>
                                    </div>
                                </div>
                            @endforeach
                        @else
                            <div class="form-group row" id="language-field-0">
                                <div class="col-md-5">
                                    <label for="language">Language</label>
                                    <input type="text" name="languages[0][language]" class="form-control" required>
                                </div>
                                <div class="col-md-5">
                                    <label for="proficient">Proficient</label>
                                    <input type="number" name="languages[0][proficient]" class="form-control" required
                                        min="0" max="100">
                                </div>
                                <div class="col-md-2 d-flex align-items-end">
                                    <button type="button" class="btn btn-danger remove" data-id="0">Remove</button>
                                </div>
                            </div>
                        @endif
                        <button type="button" class="btn btn-primary add-more">Add More</button>
                    </div> --}}
                <div class="form-group row">
                    <div class="col-md-6">
                        <label for="business_name">Business Name</label>
                        <x-adminlte-input class="form-control" id="business_name" name="business_name"
                            placeholder="Enter  Business Name"
                            value="{{ old('business_name') ?? ($transporter ? $transporter->business_name : '') }}"
                            required />
                    </div>
                    <div class="col-md-6">
                        <label for="service_type">Service Type</label>
                        <select name="service_type" id="service_type" class="form-control">
                            @foreach (App\Models\Transporter::service_type as $key => $service_type)
                                <option value="{{ $key }}"
                                    {{ $transporter && $transporter->service_type == $key ? 'selected' : '' }}>
                                    {{ $service_type }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-md-6">
                        <label for="cities">Select Cities</label>
                        <select name="cities[]" id="cities" class="form-control select2" multiple>
                            @foreach ($cities as $city)
                                <option value="{{ $city->id }}"
                                    {{ in_array($city->id, $selectedCityIds) ? 'selected' : '' }}>
                                    {{ $city->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label for="service_area">Service Area</label>
                        <x-adminlte-input class="form-control" id="service_area" name="service_area"
                            placeholder="Enter Service Area "
                            value="{{ old('service_area') ?? ($transporter ? $transporter->service_area : '') }}"
                            required />
                    </div>
                </div>
                <div class="form-group row">
                     <div class="col-md-6">
                    <label for="address">Address</label>
                    <x-adminlte-input class="form-control" id="address" name="address" placeholder="Enter Address"
                        value="{{ old('address') ?? ($transporter ? $transporter->address : '') }}" required />
                </div>
                <div class="col-md-6">
                    <label for="transporter_image">Transporter image</label>
                    <x-adminlte-input class="form-control" type="file" id="transporter_image" name="transporter_image" placeholder="upload Image"
                        value="{{ old('transporter_image') }}"/>
                         <div class="mb-3 mt-2">
                                <label>Selected Transporter Image:</label><br>
                                <img id="image_preview" 
                                    src="{{ $transporter->getFirstMediaUrl('transporter_image') }}" 
                                    alt="Transporter Image" 
                                    style="max-width: 80p; height: 80px;">
                            </div>
                        {{-- @if($user->getFirstMediaUrl('transporter_image'))
                            <div class="mb-3">
                                <label>Current Transporter Image:</label><br>
                                <img src="{{ $user->getFirstMediaUrl('transporter_image') }}" alt="Transporter Image" style="max-width: 200px; height: auto;">
                            </div>
                        @endif --}}
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-md-6">
                        <label for="status">Status</label>
                        <select name="status" id="status" class="form-control">
                            @foreach (App\Models\Transporter::status as $key => $status)
                                <option value="{{ $key }}"
                                    {{ old('status', $transporter->status ?? '') == $key ? 'selected' : '' }}>
                                    {{ $status }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    {{-- <div class="col-md-3 mt-5">
                        <input type="checkbox" id="is_active" name="is_active" value="1"
                            {{ $user->status == 1 ? 'checked' : '' }}>
                        <label for="is_active">Is User Active</label>
                    </div> --}}
                    <div class="col-md-3 mt-5">
                        <input type="checkbox" id="is_verified" name="is_verified" value="1"
                            {{ $transporter && $transporter->is_verified == App\Models\Transporter::VERIFIED_YES ? 'checked' : '' }}>
                        <label for="is_verified">Is Transporter Verified</label>
                    </div>
                </div>
                <div class="form-group" id="inactive_reason_group" style="display: none;">
                    <label for="inactive_reason">Reason</label>
                    <x-adminlte-textarea class="form-control" id="inactive_reason" name="inactive_reason"
                        placeholder="Enter Reason...">
                        {{ old('inactive_reason') }}{{ $transporter ? $transporter->inactive_reason : '' }}
                    </x-adminlte-textarea>
                </div>
                <div class="card-footer d-flex justify-content-end">
                    <a href="{{ route('users.index') }}" class="btn btn-danger mx-1">Cancel</a>
                    <button type="submit" class="btn btn-dark mx-1">Update</button>
                </div>
            </div>
        </form>
    </div>
@stop
@push('js')
    <script type="text/javascript">
        $(document).ready(function() {
            // let languageCount = {{ $languages->count() ?? 0 }};

            // $('.add-more').click(function() {
            //     const newField = `
            //     <div class="form-group row" id="language-field-${languageCount}">
            //         <div class="col-md-5">
            //             <label for="language">Language</label>
            //             <input type="text" name="languages[${languageCount}][language]" class="form-control" required>
            //         </div>
            //         <div class="col-md-5">
            //             <label for="proficient">Proficient</label>
            //             <input type="number" name="languages[${languageCount}][proficient]" class="form-control" required min="0" max="100">
            //         </div>
            //         <div class="col-md-2 d-flex align-items-end">
            //             <button type="button" class="btn btn-danger remove" data-id="${languageCount}">Remove</button>
            //         </div>
            //     </div>
            // `;
            //     $('#language-fields').append(newField);
            //     languageCount++;
            // });

            // $(document).on('click', '.remove', function() {
            //     const fieldId = $(this).data('id');
            //     $(`#language-field-${fieldId}`).remove();
            // });
             var input = document.querySelector('#languages');
                new Tagify(input, {
                    whitelist: ["English", "Urdu", "Hindi", "Punjabi", "Arabic"], // optional predefined
                    dropdown: {
                        enabled: 1, // shows suggestions after 1 character
                        fuzzySearch: true,
                    }
                });
            function toggleInactiveReason() {
                const value = $('#status').val();
                // Show the inactive reason group for "Inactive" (0) and "Banned" (2) status
                if (value === "0" || value === "2") {
                    $('#inactive_reason_group').show();
                } else {
                    $('#inactive_reason_group').hide();
                }
            }

            $('#status').on('change', toggleInactiveReason);
            // Trigger on page load
            toggleInactiveReason();

            $('#cities').select2({
                placeholder: "Select cities",
                allowClear: true
            });
        });

        $('#transporter_image').on('change', function (event) {
        var file = event.target.files[0];
        if (file) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#image_preview').attr('src', e.target.result);
            };

            reader.readAsDataURL(file);
        }
    });
    </script>
@endpush