@extends('admin.layouts.layouts')

@section('title', 'Edit | My Travel Plan')

@section('page-css')
    <style>
        .travel-plan-table-container {
            overflow-x: auto;
            padding: 10px 0;
        }
        #travel-plan-table {
            width: 100%;
            min-width: 1200px;
            border-collapse: collapse;
        }
         #travel-plan-table th, #travel-plan-table td {
            padding-top: 8px;
            padding-right: 8px;
            padding-left: 8px;
            border: 1px solid #ddd;
            vertical-align: middle;
        }
        #travel-plan-table th {
            background-color: #f5f5f5;
            font-weight: bold;
        }
        #travel-plan-table td {
            background-color: #fdfdfd;
        }
        #travel-plan-table .form-control, #travel-plan-table .select2-container {
            width: 150px;
            min-width: 165px;
        }
        #travel-plan-table textarea.form-control {
            width: 200px;
            min-width: 300px;
        }
        #travel-plan-table .error-msg {
            display: block;
            font-size: 0.8em;
            min-height: 20px;
        }
        .travel-plan-table-container::-webkit-scrollbar {
            height: 8px;
        }
        .travel-plan-table-container::-webkit-scrollbar-thumb {
            background-color: #999;
            border-radius: 4px;
        }
        .travel-plan-table-container::-webkit-scrollbar-thumb:hover {
            background-color: #666;
        }
        .add-btn-container {
            margin-top: 15px;
        }
    </style>
@endsection

@section('content')
    <div class="page-header">
        <h3 class="page-title">Edit My Travel Plan</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('travel-plan.index') }}">My Travel Plan</a></li>
                <li class="breadcrumb-item active" aria-current="page">Edit</li>
            </ol>
        </nav>
    </div>
    <div class="card">
        {!! Form::open([
            'route' => 'travel-plan.store',
            'method' => 'POST',
            'id' => 'travel-plan-form',
            'enctype' => 'multipart/form-data',
        ]) !!}
        @csrf
        <div class="card-body">
            {!! Form::hidden('id', $travelPlanDetail->id, ['id' => 'id']) !!}
            <div class="row">
                <div class="col-md-3">
                    <div class="form-group">
                        <label for="destination_type" class="form-label">Destination Type <span class="text-danger">*</span></label>
                        <div class="row">
                            <div class="col-md-auto d-flex flex-row">
                                <div class="form-check me-3">
                                    <label class="form-check-label">
                                        <input type="radio" class="form-check-input" id="destination_type" name="destination_type" value="National" data-parsley-required
                                        data-parsley-required-message="Please select destination type"
                                        data-parsley-errors-container="#destination_type_error" {{ old('destination_type', $travelPlanDetail->destination_type) == 'National' ? 'checked' : '' }}>National
                                    </label>
                                </div>
                                <div class="form-check me-3 ml-2">
                                    <label class="form-check-label">
                                        <input type="radio" class="form-check-input" id="destination_type" name="destination_type" value="International" data-parsley-errors-container="#destination_type_error" {{ old('destination_type', $travelPlanDetail->destination_type) == 'International' ? 'checked' : '' }}>International
                                    </label>
                                </div>
                            </div>
                        </div>
                        <span class="text-danger" id="destination_type_error">{{ $errors->first('destination_type') }}</span>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="form-group">
                        <label for="type" class="form-label">Type <span class="text-danger">*</span></label>
                        <select name="type" id="type"
                            class="form-control form-control-lg" data-parsley-trigger='keyup' data-parsley-required="required"
                            data-parsley-required-message="Please select type" data-parsley-errors-container="#type_error">
                            <option value="">Select Type</option>
                            <option value="Scheduled" {{ old('type', $travelPlanDetail->type) == 'Scheduled' ? 'selected' : '' }}>Scheduled</option>
                            <option value="Emergency" {{ old('type', $travelPlanDetail->type) == 'Emergency' ? 'selected' : '' }}>Emergency</option>
                        </select>
                        <span class="text-danger error-msg" id="type_error">{{ $errors->first('type') }}</span>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="form-group">
                        <label for="start_date" class="form-label">Start Date <span class="text-danger">*</span></label>
                        <input type="text" name="start_date" id="start_date" class="form-control startDate"
                            value="{{ old('start_date', date('d-m-Y', strtotime($travelPlanDetail->start_date))) }}" placeholder="Select Start Date"
                            data-parsley-trigger='keyup'  data-parsley-required data-parsley-required-message="Please select start date"
                            data-parsley-datecustom data-parsley-errors-container='#start_date_error'>
                        <span class="text-danger error-msg" id="start_date_error">{{ $errors->first('start_date') }}</span>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="form-group">
                        <label for="end_date" class="form-label">End Date <span class="text-danger">*</span></label>
                        <input type="text" name="end_date" id="end_date" class="form-control endDate"
                            value="{{ old('end_date', date('d-m-Y', strtotime($travelPlanDetail->end_date))) }}" placeholder="Select End Date"
                            data-parsley-trigger='keyup'  data-parsley-required data-parsley-required-message="Please select end date" data-parsley-datecustom
                            data-parsley-errors-container='#end_date_error'>
                        <span class="text-danger error-msg"
                            id="end_date_error">{{ $errors->first('end_date') }}</span>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="form-group">
                        <label for="mod_of_travel_ids" class="form-label">
                            Mod Of Travel <span class="text-danger">*</span>
                        </label>
                        <select name="mod_of_travel_ids[]" id="mod_of_travel_ids" class="form-control"
                            multiple="multiple" data-parsley-trigger='keyup' data-parsley-required data-parsley-required-message="Please select mod of travel" data-parsley-errors-container="#mod_of_travel_ids_error">
                            @foreach ($employeeModOfTravels as $employeeModOfTravel)
                                <option value="{{ $employeeModOfTravel->id }}" {{ in_array($employeeModOfTravel->id, old('mod_of_travel_ids', explode(',', $travelPlanDetail->mod_of_travel_ids))) ? 'selected' : '' }}>{{ $employeeModOfTravel->name }}</option>
                            @endforeach
                        </select>
                        <div class="text-danger" id="mod_of_travel_ids_error"></div>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="form-group">
                        <label for="send_to_travel_desk" class="form-label">Send to Travel Desk? <span class="text-danger">*</span></label>
                        <div class="row">
                            <div class="col-md-auto d-flex flex-row">
                                <div class="form-check me-3">
                                    <label class="form-check-label">
                                        <input type="radio" class="form-check-input" id="send_to_travel_desk" name="send_to_travel_desk" value="1" {{ old('send_to_travel_desk', $travelPlanDetail->send_to_travel_desk) == 1 ? 'checked' : '' }} data-parsley-required
                                        data-parsley-required-message="Please select send to travel desk"
                                        data-parsley-errors-container="#send_to_travel_desk_error">Yes
                                    </label>
                                </div>
                                <div class="form-check me-3 ml-2">
                                    <label class="form-check-label">
                                        <input type="radio" class="form-check-input" id="send_to_travel_desk" name="send_to_travel_desk" value="0" {{ old('send_to_travel_desk', $travelPlanDetail->send_to_travel_desk) == 0 ? 'checked' : '' }} data-parsley-errors-container="#send_to_travel_desk_error">No
                                    </label>
                                </div>
                            </div>
                        </div>
                        <span class="text-danger" id="send_to_travel_desk_error">{{ $errors->first('send_to_travel_desk') }}</span>
                    </div>
                </div>
            </div>

            <div class="travel-plan-table-container">
                <table id="travel-plan-table">
                    <thead>
                        <tr>
                            <th></th>
                            <th>Start Date <span class="text-danger">*</span></th>
                            <th>End Date <span class="text-danger">*</span></th>
                            <th>Purpose <span class="text-danger">*</span></th>
                            <th>Name Of Destination <span class="text-danger">*</span></th>
                            <th class="th-country" style="display: {{ $travelPlanDetail->destination_type == 'International' ? 'table-cell' : 'none' }}">Country <span class="text-danger">*</span></th>
                            <th class="th-state" style="display: {{ $travelPlanDetail->destination_type == 'National' ? 'table-cell' : 'none' }}">State <span class="text-danger">*</span></th>
                            <th class="th-district" style="display: {{ $travelPlanDetail->destination_type == 'National' ? 'table-cell' : 'none' }}">District <span class="text-danger">*</span></th>
                            <th class="th-subdistrict" style="display: {{ $travelPlanDetail->destination_type == 'National' ? 'table-cell' : 'none' }}">Sub District</th>
                            <th class="th-city" style="display: {{ $travelPlanDetail->destination_type == 'National' ? 'table-cell' : 'none' }}">City</th>
                            <th>Remark <span class="text-danger">*</span></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($travelPlanItemsData as $index => $data)
                            @php $item = $data['item']; @endphp
                            <tr class="travel-plan-row" data-row-id="travel-plan-row-{{ $index }}">
                                <td>
                                    @if($index > 0)
                                        <i class="fa fa-trash remove-row" title="Remove" style="color: red; cursor: pointer; padding-bottom: 20px;"></i>
                                    @endif
                                </td>
                                <td>
                                    <input type="hidden" name="travel_detail_id[]" value="{{ $item->id }}">
                                    <input type="text" name="start_date_travel_detail[]" id="start_date_travel_detail_{{ $index }}"
                                        class="form-control startDateTravelDetail" placeholder="Select Start Date"
                                        value="{{ old('start_date_travel_detail.' . $index, date('d-m-Y', strtotime($item->start_date))) }}"
                                        data-parsley-trigger="keyup" data-parsley-required
                                        data-parsley-required-message="Please select start date"
                                        data-parsley-datecustom data-parsley-errors-container="#start_date_travel_detail_error_{{ $index }}">
                                    <span class="text-danger error-msg" id="start_date_travel_detail_error_{{ $index }}">
                                        {{ $errors->first('start_date_travel_detail.' . $index) }}
                                    </span>
                                </td>
                                <td>
                                    <input type="text" name="end_date_travel_detail[]" id="end_date_travel_detail_{{ $index }}"
                                        class="form-control endDateTravelDetail" placeholder="Select End Date"
                                        value="{{ old('end_date_travel_detail.' . $index, date('d-m-Y', strtotime($item->end_date))) }}"
                                        data-parsley-trigger="keyup" data-parsley-required
                                        data-parsley-required-message="Please select end date"
                                        data-parsley-datecustom data-parsley-errors-container="#end_date_travel_detail_error_{{ $index }}">
                                    <span class="text-danger error-msg" id="end_date_travel_detail_error_{{ $index }}">
                                        {{ $errors->first('end_date_travel_detail.' . $index) }}
                                    </span>
                                </td>
                                <td>
                                    <select name="purpose_id[]" id="purpose_id_{{ $index }}" class="form-control"
                                        data-parsley-required data-parsley-required-message="Please select purpose"
                                        data-parsley-errors-container='#purpose_id_error_{{ $index }}'>
                                        <option value="">Select Purpose</option>
                                        @foreach ($purposes as $key => $purpose)
                                            <option value="{{ $key }}" {{ old('purpose_id.' . $index, $item->purpose_id) == $key ? 'selected' : '' }}>
                                                {{ $purpose }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <span class="text-danger error-msg" id="purpose_id_error_{{ $index }}">
                                        {{ $errors->first('purpose_id.' . $index) }}
                                    </span>
                                </td>
                                <td>
                                    <input type="text" name="destination_name[]" id="destination_name_{{ $index }}" class="form-control"
                                        placeholder="Name Of Destination"
                                        value="{{ old('destination_name.' . $index, $item->destination_name) }}" maxlength="100"
                                        data-parsley-required data-parsley-trigger="keyup" data-parsley-maxlength="100"
                                        data-parsley-maxlength-message="Name of destination may not be greater than 100 characters"
                                        data-parsley-required-message="Please enter name of destination"
                                        data-parsley-errors-container="#destination_name_error_{{ $index }}">
                                    <span class="text-danger error-msg" id="destination_name_error_{{ $index }}">
                                        {{ $errors->first('destination_name.' . $index) }}
                                    </span>
                                </td>
                                <td class="tdCountrySelect" style="display: {{ $travelPlanDetail->destination_type == 'International' ? 'table-cell' : 'none' }}">
                                    <select class="form-control countrySelect" name="country[]" id="country_{{ $index }}"
                                        data-parsley-trigger="keyup"
                                        {{ $travelPlanDetail->destination_type == 'International' ? 'data-parsley-required data-parsley-required-message="Please select country"' : '' }}
                                        data-parsley-errors-container="#country_error_{{ $index }}">
                                        <option value="">Select Country</option>
                                        @foreach ($countries as $countryData)
                                            <option value="{{ $countryData->id }}" {{ old('country.' . $index, $item->country) == $countryData->id ? 'selected' : '' }}>
                                                {{ $countryData->country_name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <span class="text-danger error-msg" id="country_error_{{ $index }}">
                                        {{ $errors->first('country.' . $index) }}
                                    </span>
                                </td>
                                <td class="tdStateSelect" style="display: {{ $travelPlanDetail->destination_type == 'National' ? 'table-cell' : 'none' }}">
                                    <select class="form-control stateSelect" name="state[]" id="state_{{ $index }}"
                                        data-parsley-trigger="keyup"
                                        {{ $travelPlanDetail->destination_type == 'National' ? 'data-parsley-required data-parsley-required-message="Please select state"' : '' }}
                                        data-parsley-errors-container="#state_error_{{ $index }}">
                                        <option value="">Select State</option>
                                        @foreach ($states as $stateData)
                                            <option value="{{ $stateData->id }}" {{ old('state.' . $index, $item->state) == $stateData->id ? 'selected' : '' }}>
                                                {{ $stateData->state_name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <span class="text-danger error-msg" id="state_error_{{ $index }}">
                                        {{ $errors->first('state.' . $index) }}
                                    </span>
                                </td>
                                <td class="tdDistrictSelect" style="display: {{ $travelPlanDetail->destination_type == 'National' ? 'table-cell' : 'none' }}">
                                    <select class="form-control districtSelect" name="district[]" id="district_{{ $index }}"
                                        data-parsley-trigger="keyup"
                                        {{ $travelPlanDetail->destination_type == 'National' ? 'data-parsley-required data-parsley-required-message="Please select district"' : '' }}
                                        data-parsley-errors-container="#district_error_{{ $index }}"
                                        data-preselected="{{ old('district.' . $index, $item->district) }}">
                                        <option value="">Select District</option>
                                        @foreach ($data['districts'] as $district)
                                            <option value="{{ $district->id }}" {{ old('district.' . $index, $item->district) == $district->id ? 'selected' : '' }}>
                                                {{ $district->district_name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <span class="text-danger error-msg" id="district_error_{{ $index }}">
                                        {{ $errors->first('district.' . $index) }}
                                    </span>
                                </td>
                                <td class="tdSubDistrictSelect" style="display: {{ $travelPlanDetail->destination_type == 'National' ? 'table-cell' : 'none' }}">
                                    <select class="form-control subDistrictSelect" name="sub_district[]" id="sub_district_{{ $index }}"
                                        data-parsley-trigger="keyup"
                                        {{-- {{ $travelPlanDetail->destination_type == 'National' ? 'data-parsley-required data-parsley-required-message="Please select sub district"' : '' }} --}}
                                        data-parsley-errors-container="#sub_district_error_{{ $index }}"
                                        data-preselected="{{ old('sub_district.' . $index, $item->sub_district) }}">
                                        <option value="">Select Sub District</option>
                                        @foreach ($data['subDistricts'] as $sub)
                                            <option value="{{ $sub->id }}" {{ old('sub_district.' . $index, $item->sub_district) == $sub->id ? 'selected' : '' }}>
                                                {{ $sub->sub_district_name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <span class="text-danger error-msg" id="sub_district_error_{{ $index }}">
                                        {{ $errors->first('sub_district.' . $index) }}
                                    </span>
                                </td>
                                <td class="tdCitySelect" style="display: {{ $travelPlanDetail->destination_type == 'National' ? 'table-cell' : 'none' }}">
                                    <select class="form-control citySelect" name="city[]" id="city_{{ $index }}"
                                        data-parsley-trigger="keyup"
                                        {{-- {{ $travelPlanDetail->destination_type == 'National' ? 'data-parsley-required data-parsley-required-message="Please select city"' : '' }} --}}
                                        data-parsley-errors-container="#city_error_{{ $index }}"
                                        data-preselected="{{ old('city.' . $index, $item->city) }}">
                                        <option value="">Select City</option>
                                        @foreach ($data['cities'] as $city)
                                            <option value="{{ $city->id }}" {{ old('city.' . $index, $item->city) == $city->id ? 'selected' : '' }}>
                                                {{ $city->city_name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <span class="text-danger error-msg" id="city_error_{{ $index }}">
                                        {{ $errors->first('city.' . $index) }}
                                    </span>
                                </td>
                                <td>
                                    <textarea class="form-control" name="remark[]" id="remark_{{ $index }}" rows="3" placeholder="Remark"
                                        data-parsley-required="true" data-parsley-required-message="Please enter remark"
                                        data-parsley-errors-container="#remark_error_{{ $index }}">{{ old('remark.' . $index, $item->remark) }}</textarea>
                                    <span class="text-danger error-msg" id="remark_error_{{ $index }}">
                                        {{ $errors->first('remark.' . $index) }}
                                    </span>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div class="add-btn-container">
                <a class="btn btn-sm btn-primary" id="addMore" title="Add More"><i class="fa fa-plus"></i></a>
            </div>
        </div>
        <div class="card-footer">
            <button type="submit" class="btn btn-primary btn-fw" id="addTravelPlan">Update</button>
            <a href="{{ route('travel-plan.index') }}" class="btn btn-light btn-fw">Cancel</a>
        </div>
        {{ Form::close() }}
    </div>
@endsection

@section('page-js')
    <script type="text/javascript">
        var travelPlanList = "{{ route('travel-plan.index') }}";
        var travelPlanStore = "{{ route('travel-plan.store') }}";
        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') }}";
        const states = @json($states);
        const countries = @json($countries);
        const purposes = @json($purposes);
        const purposeKeys = Object.keys(purposes);
    </script>
    <script src="{{ asset('assets/js/admin/travel-plan.js') }}"></script>
@endsection