@extends('admin.layouts.layouts')

@section('title', 'Create | Transport Management')

@section('page-css')
    <style>
        ul.token-input-list-facebook {
            border: 1px solid #e0e0ef;
            min-height: 47px;
        }
    </style>
@endsection

@section('content')
    <div class="page-header">
        <h3 class="page-title">Create Transport Management</h3>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ route('transporter.index') }}">Transporter Management </a></li>
                <li class="breadcrumb-item active" aria-current="page">Create</li>
            </ol>
        </nav>
    </div>

    <div class="card">
        {!! Form::open([
            'route' => 'transporter.store',
            'method' => 'POST',
            'id' => 'validate_form_add_transporter',
            'class' => 'forms-sample',
            'enctype' => 'multipart/form-data',
        ]) !!}

        @csrf
        <input type="hidden" name="transporter_code" value="TC{{ time() }}">

        <div class="card-body">
            {{-- Basic Details --}}
            <div class="row">
                <div class="col-md-12">
                    <h4 class="card-title"><strong>Basic Details</strong></h4>
                </div>
                <div class="col-md-12">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">Transporter Name <span class="text-danger">*</span></label>
                                <input type="text" class="form-control onlytxt" name="transporter_name" maxlength="100"
                                    placeholder="Enter Transporter Name" value="{{ old('transporter_name') }}"
                                    data-parsley-trigger="keyup" data-parsley-required="true"
                                    data-parsley-required-message="Please enter transporter name"
                                    data-parsley-errors-container='#transporter_name_error'>
                                <span class="text-danger"
                                    id="transporter_name_error">{{ $errors->first('transporter_name') }}</span>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">Mobile Number <span class="text-danger">*</span></label>
                                <input type="text" class="form-control mobile" name="mobile_number" id="mobile_number"
                                    placeholder="Enter Mobile Number" value="{{ old('mobile_number') }}"
                                    data-parsley-trigger="keyup" data-parsley-required="true"
                                    data-parsley-required-message="Please enter mobile number"
                                    data-parsley-pattern="^[0-9]{10}$" maxlength="10" data-parsley-maxlength="10"
                                    data-parsley-maxlength-message="Please enter valid 10 digit mobile number"
                                    data-parsley-pattern-message="Please enter valid 10 digit mobile number"
                                    data-parsley-errors-container='#mobile_number_error'>
                                <span class="text-danger"
                                    id="mobile_number_error">{{ $errors->first('mobile_number') }}</span>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">Email</label>
                                <input type="email" class="form-control" name="email" id="email"
                                    placeholder="Enter Email" value="{{ old('email') }}" data-parsley-trigger="keyup"
                                    data-parsley-type="email" data-parsley-type-message="Please enter valid email"
                                    data-parsley-errors-container='#email_error'>
                                <span class="text-danger" id="email_error">{{ $errors->first('email') }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">Password<span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <input type="password" class="form-control" name="password" id="password"
                                        placeholder="Enter Password" data-parsley-trigger="keyup" maxlength="32"
                                        data-parsley-required="required"
                                        data-parsley-required-message="{{ __('messages.custom.password_required_messages') }}"
                                        data-parsley-pattern="(?=.*\d)(?=.*[@#$%&!*])(?=.*[a-z])(?=.*[A-Z]).*"
                                        data-parsley-minlength="[8,16]"
                                        data-parsley-minlength-message="{{ __('messages.custom.password_length_messages') }}"
                                        data-parsley-pattern-message="{{ __('messages.custom.password_pattern_messages') }}"
                                        data-parsley-trigger="keyup" data-parsley-errors-container="#password_error">
                                    <div class="input-group-append">
                                        <span class="input-group-text" onclick="togglePassword('password')">
                                            <i class="fa fa-eye" id="toggleNewPassword"></i>
                                        </span>
                                    </div>
                                </div>
                                <span class="text-danger" id="password_error">{{ $errors->first('password') }}</span>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">Confirm Password <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <input type="password" class="form-control" name="confirm_password"
                                        id="confirm_password" placeholder="Confirm Password" data-parsley-trigger="keyup"
                                        maxlength="32"
                                        data-parsley-required-message="{{ __('messages.custom.confirm_password_required_messages') }}"
                                        data-parsley-pattern="(?=.*\d)(?=.*[@#$%&!*])(?=.*[a-z])(?=.*[A-Z]).*"
                                        data-parsley-minlength="[8,16]"
                                        data-parsley-minlength-message="{{ __('messages.custom.password_length_messages') }}"
                                        data-parsley-equalto="#password"
                                        data-parsley-equalto-message="Confirm password should be same as password."
                                        data-parsley-pattern-message="{{ __('messages.custom.password_pattern_messages') }}"
                                        data-parsley-errors-container='#password_confirmation_error'>
                                    <div class="input-group-append">
                                        <span class="input-group-text" onclick="togglePassword('confirm_password')">
                                            <i class="fa fa-eye" id="toggleConfirmPassword"></i>
                                        </span>
                                    </div>
                                </div>
                                <span class="text-danger"
                                    id="password_confirmation_error">{{ $errors->first('password_confirmation') }}</span>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">Contact Person <span class="text-danger">*</span></label>
                                <input type="text" class="form-control onlytxt" name="contact_person_name"
                                    maxlength="100" placeholder="Enter Contact Person Name"
                                    value="{{ old('contact_person_name') }}" data-parsley-required="true"
                                    data-parsley-required-message="Please enter contact person name"
                                    data-parsley-trigger="keyup"
                                    data-parsley-errors-container='#contact_person_name_error'>
                                <span class="text-danger"
                                    id="contact_person_name_error">{{ $errors->first('contact_person_name') }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">Contact Mobile <span class="text-danger">*</span></label>
                                <input type="text" class="form-control mobile" name="contact_mobile_number"
                                    placeholder="Enter Contact Mobile" value="{{ old('contact_mobile_number') }}"
                                    data-parsley-trigger="keyup" data-parsley-required="true"
                                    data-parsley-required-message="Please enter contact mobile"
                                    data-parsley-pattern="^[0-9]{10}$" maxlength="10" data-parsley-maxlength="10"
                                    data-parsley-maxlength-message="Please enter valid 10 digit contact mobile"
                                    data-parsley-pattern-message="Please enter valid 10 digit mobile"
                                    data-parsley-errors-container='#contact_mobile_number_error'>
                                <span class="text-danger"
                                    id="contact_mobile_number_error">{{ $errors->first('contact_mobile_number') }}</span>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">State</label>
                                <select class="form-control stateSelect" name="state" id="state">
                                    <option value="">Select State</option>
                                    @foreach ($state as $stateData)
                                        <option value="{{ $stateData->id }}"
                                            {{ old('state') == $stateData->id ? 'selected' : '' }}>
                                            {{ $stateData->state_name }}
                                        </option>
                                    @endforeach
                                </select>
                                <span class="text-danger error-msg" id="state_error">{{ $errors->first('state') }}</span>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">District</label>
                                <select class="form-control districtSelect" name="district" id="district">
                                    <option value="">Select District</option>
                                </select>
                                <span class="text-danger error-msg"
                                    id="district_error">{{ $errors->first('district') }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">Taluka</label>
                                <select class="form-control talukaSelect" name="taluka" id="taluka">
                                    <option value="">Select Taluka</option>
                                </select>
                                <span class="text-danger error-msg"
                                    id="taluka_error">{{ $errors->first('taluka') }}</span>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">City</label>
                                <select class="form-control citySelect" name="city" id="city">
                                    <option value="">Select City</option>
                                </select>
                                <span class="text-danger error-msg" id="city_error">{{ $errors->first('city') }}</span>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">Pincode<span class="text-danger">*</span></label>
                                <input type="text" class="form-control pinCode" name="pincode"
                                    placeholder="Enter Pincode" value="{{ old('pincode') }}"
                                    data-parsley-trigger="keyup" data-parsley-required="true"
                                    data-parsley-required-message="Please enter pincode" data-parsley-type="number"
                                    data-parsley-type-message="Please enter valid pincode"
                                    data-parsley-pattern="^[0-9]{6}$"
                                    data-parsley-pattern-message="Please enter a valid 6-digit pincode."
                                    data-parsley-length="[6, 6]"
                                    data-parsley-length-message="Pincode must be exactly 6 digits."
                                    data-parsley-errors-container='#pincode_error'>
                                <span class="text-danger error-msg"
                                    id="pincode_error">{{ $errors->first('pincode') }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">Pick Up States <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="pickup_states" name="pickup_states[]"
                                    data-parsley-trigger="keyup" data-parsley-required="true"
                                    data-parsley-required-message="Please select pick up states"
                                    data-parsley-errors-container='#pickup_states_error' autocomplete="off" />
                                <span class="text-danger error-msg"
                                    id="pickup_states_error">{{ $errors->first('pickup_states') }}</span>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">Pick Up Districts <span class="text-danger">*</span></label>
                                <div>
                                    <input type="text" class="form-control" id="pickup_districts"
                                        name="pickup_districts[]" data-parsley-trigger="keyup"
                                        data-parsley-required="true"
                                        data-parsley-required-message="Please select pick up districts"
                                        data-parsley-errors-container='#pickup_districts_error' autocomplete="off" />
                                    <span class="text-danger error-msg"
                                        id="pickup_districts_error">{{ $errors->first('pickup_districts') }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">Address</label>
                                <textarea class="form-control" name="address" rows="3" placeholder="Enter Address">{{ old('address') }}</textarea>
                                <span class="text-danger error-msg"
                                    id="address_error">{{ $errors->first('address') }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">GST No <span class="text-danger">*</span></label>
                                <input type="text" class="form-control gstNumber" name="gst_no"
                                    placeholder="Enter GST Number" value="{{ old('gst_no') }}"
                                    data-parsley-required="true" data-parsley-required-message="Please enter GST number"
                                    data-parsley-pattern="^[0-9]{2}[A-Z]{5}[0-9]{4}[A-Z]{1}[1-9A-Z]{1}Z[0-9A-Z]{1}$"
                                    data-parsley-pattern-message="Please enter valid GST number"
                                    data-parsley-trigger="keyup">
                                <span class="text-danger error-msg"
                                    id="gst_no_error">{{ $errors->first('gst_no') }}</span>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">GST File <span class="text-danger">*</span></label>
                                <input type="file" class="form-control" name="gst_file" data-parsley-required="true"
                                    data-parsley-required-message="Please upload GST document"
                                    data-parsley-trigger="change" data-parsley-filetype="pdf,jpg,jpeg,png"
                                    data-parsley-filetype-message="Only PDF, JPG, JPEG and PNG files are allowed"
                                    data-parsley-errors-container='#gst_file_error'>
                                <span class="text-danger error-msg"
                                    id="gst_file_error">{{ $errors->first('gst_file') }}</span>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">TAN Number</label>
                                <input type="text" class="form-control capital_and_number" name="tin_no"
                                    placeholder="Enter TAN Number" value="{{ old('tin_no') }}">
                                <span class="text-danger error-msg"
                                    id="tin_no_error">{{ $errors->first('tin_no') }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">TAN File</label>
                                <input type="file" class="form-control" name="tin_file" data-parsley-trigger="change"
                                    data-parsley-filetype="pdf,jpg,jpeg,png"
                                    data-parsley-filetype-message="Only PDF, JPG, JPEG and PNG files are allowed"
                                    data-parsley-errors-container='#tin_no_error'>
                                <span class="text-danger error-msg"
                                    id="tin_file_error">{{ $errors->first('tin_file') }}</span>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">PAN Number <span class="text-danger">*</span></label>
                                <input type="text" class="form-control panNumber" name="pan_no"
                                    placeholder="Enter PAN Number" value="{{ old('pan_no') }}"
                                    data-parsley-required="true" data-parsley-required-message="Please enter PAN number"
                                    data-parsley-pattern="^[A-Z]{5}[0-9]{4}[A-Z]{1}$"
                                    data-parsley-pattern-message="Please enter valid PAN number"
                                    data-parsley-trigger="keyup">
                                <span class="text-danger error-msg"
                                    id="pan_no_error">{{ $errors->first('pan_no') }}</span>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">PAN File <span class="text-danger">*</span></label>
                                <input type="file" class="form-control" name="pan_file" data-parsley-required="true"
                                    data-parsley-required-message="Please upload PAN document"
                                    data-parsley-trigger="change" data-parsley-filetype="pdf,jpg,jpeg,png"
                                    data-parsley-filetype-message="Only PDF, JPG, JPEG and PNG files are allowed"
                                    data-parsley-errors-container='#pan_file_error'>
                                <span class="text-danger error-msg"
                                    id="pan_file_error">{{ $errors->first('pan_file') }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">Udhyam Reg.(MSME) No.</label>
                                <input type="text" class="form-control" name="udhyam_reg_no"
                                    placeholder="Enter Udhyam Reg. Number" value="{{ old('udhyam_reg_no') }}">
                                <span class="text-danger error-msg"
                                    id="udhyam_reg_no_error">{{ $errors->first('udhyam_reg_no') }}</span>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">Udhyam Reg.(MSME) Document</label>
                                <input type="file" class="form-control" name="udhyam_reg_document"
                                    data-parsley-trigger="change" data-parsley-filetype="pdf,jpg,jpeg,png"
                                    data-parsley-filetype-message="Only PDF, JPG, JPEG and PNG files are allowed"
                                    data-parsley-errors-container='#udhyam_reg_document_error'>
                                <span class="text-danger error-msg"
                                    id="udhyam_reg_document_error">{{ $errors->first('udhyam_reg_document') }}</span>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">Agreement Document <span class="text-danger">*</span></label>
                                <input type="file" class="form-control" name="agreement_document"
                                    data-parsley-required="true"
                                    data-parsley-required-message="Please upload agreement document"
                                    data-parsley-trigger="change" data-parsley-filetype="pdf,jpg,jpeg,png"
                                    data-parsley-filetype-message="Only PDF, JPG, JPEG and PNG files are allowed"
                                    data-parsley-errors-container='#agreement_document_error'>
                                <span class="text-danger error-msg"
                                    id="agreement_document_error">{{ $errors->first('agreement_document') }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">Start Date <span class="text-danger">*</span></label>
                                <input type="text" class="form-control startDate" name="start_date"
                                    value="{{ old('start_date') }}" data-parsley-required="true" data-parsley-datecustom
                                    data-parsley-required-message="Please select start date"
                                    data-parsley-errors-container='#start_date_error' placeholder="Select Start Date">
                                <span class="text-danger error-msg"
                                    id="start_date_error">{{ $errors->first('start_date') }}</span>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">End Date<span class="text-danger">*</span></label>
                                <input type="text" class="form-control endDate" name="end_date"
                                    value="{{ old('end_date') }}" data-parsley-required="true"
                                    data-parsley-required-message="Please select end date"
                                    data-parsley-greaterthan="#start_date"
                                    data-parsley-greaterthan-message="End date must be greater than start date"
                                    data-parsley-errors-container='#end_date_error' placeholder="Select End Date">
                                <span class="text-danger" id="end_date_error">{{ $errors->first('end_date') }}</span>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">Rate Per KG <span class="text-danger">*</span></label>
                                <input type="number" class="form-control" name="rate_per_kg"
                                    placeholder="Enter Rate Per kg" value="{{ old('rate_per_kg') }}"
                                    data-parsley-trigger="keyup" data-parsley-required="true"
                                    data-parsley-required-message="Please enter rate per kg" data-parsley-type="number"
                                    data-parsley-type-message="Please enter valid number" min="0" step="0.01"
                                    data-parsley-errors-container='#rate_per_kg_error'>
                                <span class="text-danger error-msg"
                                    id="rate_per_kg_error">{{ $errors->first('rate_per_kg') }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Bank Details --}}
            <hr>
            <div class="row mt-4">
                <div class="col-md-12">
                    <h4 class="card-title"><strong>Bank Details</strong></h4>
                </div>
                <div class="col-md-12">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                {!! Form::label('bank_name', 'Bank Name', ['class' => 'form-label']) !!} <span class="text-danger">*</span>
                                {!! Form::text('bank_name', old('bank_name'), [
                                    'id' => 'bank_name',
                                    'class' => 'form-control onlytxt',
                                    'placeholder' => 'Enter Bank Name',
                                    'maxlength' => '100',
                                    'data-parsley-trigger' => 'keyup',
                                    'data-parsley-maxlength' => '100',
                                    'data-parsley-required' => 'required',
                                    'data-parsley-required-message' => 'Please enter bank name.',
                                    'data-parsley-maxlength-message' => 'Bank name may not be greater than 100 character.',
                                ]) !!}
                                <span class="text-danger">{{ $errors->first('bank_name') }}</span>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                {!! Form::label('account_no', 'Account Number', ['class' => 'form-label']) !!} <span class="text-danger">*</span>
                                {!! Form::text('account_no', old('account_no'), [
                                    'id' => 'account_no',
                                    'class' => 'form-control bankAccNumber',
                                    'placeholder' => 'Enter Account Number',
                                    'maxlength' => '20',
                                    'data-parsley-trigger' => 'keyup',
                                    'data-parsley-minlength' => '11',
                                    'data-parsley-maxlength' => '20',
                                    'data-parsley-required' => 'required',
                                    'oninput' => 'this.value=this.value.slice(0,this.maxLength)',
                                    'data-parsley-required-message' => 'Please enter account number.',
                                    'data-parsley-minlength-message' => 'Account number at least 11 characters long.',
                                    'data-parsley-maxlength-message' => 'Account number may not be greater than 20 character.',
                                ]) !!}
                                <span class="text-danger">{{ $errors->first('account_no') }}</span>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                {!! Form::label('ifsc_code', 'IFSC Code', ['class' => 'form-label']) !!} <span class="text-danger">*</span>
                                {!! Form::text('ifsc_code', old('ifsc_code'), [
                                    'id' => 'ifsc_code',
                                    'class' => 'form-control bankIFSCCode',
                                    'placeholder' => 'Enter IFSC Code',
                                    'maxlength' => '11',
                                    'data-parsley-trigger' => 'keyup',
                                    'data-parsley-minlength' => '11',
                                    'data-parsley-maxlength' => '11',
                                    'data-parsley-required' => 'required',
                                    'oninput' => 'this.value=this.value.slice(0,this.maxLength)',
                                    'data-parsley-required-message' => 'Please enter IFSC code.',
                                    'data-parsley-minlength-message' => 'IFSC code at least 11 characters long.',
                                    'data-parsley-maxlength-message' => 'IFSC code may not be greater than 11 character.',
                                ]) !!}
                                <span class="text-danger">{{ $errors->first('ifsc_code') }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                {!! Form::label('cheque_image', 'Cheque Image', ['class' => 'form-label']) !!} <span class="text-danger">*</span>
                                {!! Form::file('cheque_image', [
                                    'id' => 'cheque_image',
                                    'class' => 'form-control',
                                    'data-parsley-trigger' => 'change',
                                    'data-parsley-required' => 'required',
                                    'data-parsley-filetype' => 'png,jpg,jpeg',
                                    'data-parsley-required-message' => 'Please upload cheque image.',
                                    'data-parsley-filetype-message' => 'Only .png, .jpg and .jpeg files are allowed.',
                                ]) !!}
                                <span class="text-danger">{{ $errors->first('cheque_image') }}</span>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                {!! Form::label('cheque_number', 'Cheque Number', ['class' => 'form-label']) !!} <span class="text-danger">*</span>
                                {!! Form::text('cheque_number', old('cheque_number'), [
                                    'id' => 'cheque_number',
                                    'class' => 'form-control chequeNo',
                                    'placeholder' => 'Enter Cheque Number',
                                    'maxlength' => '10',
                                    'data-parsley-trigger' => 'keyup',
                                    'data-parsley-minlength' => '6',
                                    'data-parsley-maxlength' => '10',
                                    'data-parsley-required' => 'required',
                                    'oninput' => 'this.value=this.value.slice(0,this.maxLength)',
                                    'data-parsley-required-message' => 'Please enter cheque number.',
                                    'data-parsley-minlength-message' => 'Cheque number at least 6 characters long.',
                                    'data-parsley-maxlength-message' => 'Cheque number may not be greater than 10 character.',
                                ]) !!}
                                <span class="text-danger">{{ $errors->first('cheque_number') }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-footer">
            <button type="submit" class="btn btn-primary mr-2" id="addTransporter">Save</button>
            <a href="{{ route('transporter.index') }}" class="btn btn-light">Cancel</a>
        </div>

        {{ Form::close() }}
    </div>
@endsection

@section('page-js')
    <script>
        var transporterId = "";
        var transporterStore = "{{ route('transporter.store') }}";
        var transporterIndexURL = "{{ route('transporter.index') }}";
        var transporterAjaxList = "{{ route('transporter.ajax-list') }}";
        var getDistrict = "{{ route('state.district.districts-of-state') }}";
        var getTaluka = "{{ route('district.sub-district.sub-districts-of-district') }}";
        var getCity = "{{ route('sub-district.city.cities-of-sub-district') }}";
        var transporterDistrictsRoute = "{{ route('transporter.search-district') }}";

        function togglePassword(fieldId) {
            var passwordField = document.getElementById(fieldId);
            var toggleSpan = document.querySelector(`#${fieldId}`).nextElementSibling.querySelector(".input-group-text");
            var toggleIcon = toggleSpan ? toggleSpan.querySelector("i") : null;

            if (passwordField && toggleIcon) {
                if (passwordField.type === "password") {
                    passwordField.type = "text";
                    toggleIcon.classList.remove('fa-eye');
                    toggleIcon.classList.add('fa-eye-slash');
                } else {
                    passwordField.type = "password";
                    toggleIcon.classList.remove('fa-eye-slash');
                    toggleIcon.classList.add('fa-eye');
                }
            } else {
                console.error("Element not found: ", fieldId);
            }
        }

        $(function() {
            $("#pickup_states").tokenInput("{{ route('transporter.search-state') }}", {
                theme: "facebook",
                preventDuplicates: true,
                hintText: "Type to search states...",
                tokenLimit: null,
                resultsLimit: 10,
                minChars: 1,
                onAdd: function() {
                    fetchDistricts();
                },
                onDelete: function(removedState) {
                    var removedStateId = removedState.id;

                    var currentDistricts = $("#pickup_districts").tokenInput("get");

                    var remainingDistricts = currentDistricts.filter(function(d) {
                        return d.state_id !== removedStateId;
                    });

                    $("#pickup_districts").tokenInput("clear");

                    remainingDistricts.forEach(function(d) {
                        $("#pickup_districts").tokenInput("add", d);
                    });

                    fetchDistricts();
                },
                onReady: function() {
                    $(this).prev(".token-input-list").find("input").attr("autocomplete", "off");
                }
            });

            $("#pickup_districts").tokenInput([], {
                theme: "facebook",
                preventDuplicates: true,
                hintText: "Type to search districts...",
                tokenLimit: null,
                onReady: function() {
                    $(this).prev(".token-input-list").find("input").attr("autocomplete", "off");
                },
                onResult: function(data) {
                    return $.map(data || [], function(el) {
                        return (el && el.id && el.name) ? {
                                id: el.id,
                                name: el.name,
                                state_id: el.state_id
                            } :
                            null;
                    });
                }
            });
        });

        function fetchDistricts() {
            var selectedStates = $("#pickup_states").tokenInput("get").map(item => item.id) || [];

            if (!selectedStates.length) {
                $("#pickup_districts").tokenInput("clear");
                return;
            }

            var params = {
                state_ids: selectedStates.join(','),
                transporter_id: transporterId || ""
            };
            var searchUrl = transporterDistrictsRoute + "?" + $.param(params);

            $("#pickup_districts").tokenInput("clear");
            $("#pickup_districts").tokenInput("destroy");

            $("#pickup_districts").tokenInput(searchUrl, {
                theme: "facebook",
                preventDuplicates: true,
                hintText: "Type to search districts...",
                tokenLimit: null,
                resultsLimit: 10,
                minChars: 0,
                propertyToSearch: "name",
                tokenValue: "id",
                onReady: function() {
                    $(this).prev(".token-input-list").find("input").attr("autocomplete", "off");
                },
                onResult: function(items) {
                    return $.map(items || [], function(el) {
                        if (el && el.id && el.name && el.state_id) {
                            return {
                                id: el.id,
                                name: el.name,
                                state_id: el.state_id
                            };
                        }
                        return null;
                    }).filter(Boolean);
                }
            });
        }
    </script>
    <script src="{{ asset('assets/js/admin/transporter.js') }}"></script>
@endsection