@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"> Add 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="add_user" role="form" action="{{ route('users.store') }}" class="jqueryValidation" enctype="multipart/form-data">
            @csrf

            <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') }}" 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') }}" 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') }}" />
                    </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') }}" required />
                    </div>
                </div>
                <div class="form-group row" id="language-fields">
                    <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') }}" required />
                    </div>
                    <div class="col-md-6">
                        <label for="language">Language</label>
                        <input name="languages[]" id="languages" class="form-control" placeholder="Type and press enter..."
                            required>
                        {{-- <input type="text" name="languages[0][language]" classclass="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-primary add-more">Add More</button>
                    </div> --}}
                </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') }}" 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 }}">{{ $service_type }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-md-6 select_citiesDropdown">
                        <label for="cities">Select Cities</label>
                        <select name="cities[]" id="cities" class="form-control select2" multiple>
                            @foreach ($cities as $city)
                                <option value="{{ $city->id }}">{{ $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') }}" 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') }}" 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') }}" required />
                    </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 }}">{{ $status }}</option>
                            @endforeach
                        </select>
                    </div>
                    {{-- <div class="col-md-3 mt-4">
                        <input type="checkbox" id="is_active" name="is_active" value="1" checked
                            {{ old('is_active') == 'on' ? 'checked' : '' }}>
                        <label for="is_active">Is User Active</label>
                    </div> --}}
                    <div class="col-md-3 mt-4">
                        <input type="checkbox" id="is_varified" name="is_verified" value="1" checked
                             {{ old('is_varified', App\Models\Transporter::VERIFIED_YES) == App\Models\Transporter::VERIFIED_YES ? 'checked' : '' }}>
                        <label for="is_varified">Is Transporter Verified</label>
                    </div>
                </div>
                {{-- <div class=" form-group">
                    <label for="type">Type</label>
                    <select name="type" id="type" class="form-control">

                        @foreach (App\Models\Transporter::type as $key => $type)
                            <option value="{{ $key }}">{{ $type }}</option>
                        @endforeach
                    </select>
                </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') }}
                    </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">Submit</button>
                </div>
            </div>
        </form>
    </div>
@stop

@push('js')
    <script type="text/javascript">
        // $(document).ready(function() {
        //     let languageCount = 1;

        //     $('.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();
        //     });
        // });


        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
        });

        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,
            }
        });
    </script>
@endpush