@extends('admin.layouts.layouts')

@section('title', 'Create | 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;
            display: table-cell;
        }

        #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">Create 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">Create</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">
            <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" checked data-parsley-required
                                        data-parsley-required-message="Please select send to travel desk"
                                        data-parsley-errors-container="#destination_type_error">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">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') ? 'selected' : '' }}>Scheduled</option>
                            <option value="Emergency" {{ old('type') ? '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') }}" placeholder="Select Start Date"
                            data-parsley-trigger='change'  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') }}" placeholder="Select End Date"
                            data-parsley-trigger='change'  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-4">
                    <div class="form-group">
                        <label for="purpose_id" class="form-label">Purpose <span class="text-danger">*</span></label>
                        <select name="purpose_id" id="purpose_id" class="form-control form-control-lg"
                            data-parsley-required data-parsley-required-message="Please select purpose"
                            data-parsley-errors-container='#purpose_id_error'>
                            <option value="">Select Purpose</option>
                            @foreach ($purposes as $key => $purpose)
                                <option value="{{ $key }}"
                                    {{ old('purpose_id') == $key ? 'selected' : '' }}>
                                    {{ $purpose }}
                                </option>
                            @endforeach
                        </select>
                        <span class="text-danger" id="purpose_id_error">{{ $errors->first('purpose_id') }}</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='change' 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 }}">{{ $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" 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" 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: none">Country <span class="text-danger">*</span></th>
                            <th class="th-state">State <span class="text-danger">*</span></th>
                            <th class="th-district">District <span class="text-danger">*</span></th>
                            <th class="th-subdistrict">Sub District</th>
                            <th class="th-city">City</th>
                            <th>Remark <span class="text-danger">*</span></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="travel-plan-row" data-row-id="travel-plan-row-1">
                            <td style="width: 60px;"></td>
                            <td>
                                <input type="text" name="start_date_travel_detail[]" id="start_date_travel_detail_0"
                                    class="form-control startDateTravelDetail" placeholder="Select Start Date"
                                    value="{{ old('start_date_travel_detail.0') }}"
                                    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_0">
                                <span class="text-danger error-msg" id="start_date_travel_detail_error_0">{{ $errors->first('start_date_travel_detail.0') }}</span>
                            </td>
                            <td>
                                <input type="text" name="end_date_travel_detail[]" id="end_date_travel_detail_0"
                                    class="form-control endDateTravelDetail" placeholder="Select End Date"
                                    value="{{ old('end_date_travel_detail.0') }}"
                                    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_0">
                                <span class="text-danger error-msg" id="end_date_travel_detail_error_0">{{ $errors->first('end_date_travel_detail.0') }}</span>
                            </td>
                            <td>
                                <select name="purpose_id[]" id="purpose_id_0" class="form-control"
                                data-parsley-required data-parsley-required-message="Please select purpose"
                                data-parsley-errors-container='#purpose_id_error_0'>
                                    <option value="">Select Purpose</option>
                                    @foreach ($purposes as $key => $purpose)
                                        <option value="{{ $key }}"
                                            {{ old('purpose_id.0') == $key ? 'selected' : '' }}>
                                            {{ $purpose }}
                                        </option>
                                    @endforeach
                                </select>
                                <span class="text-danger error-msg" id="purpose_id_error_0">{{ $errors->first('purpose_id.0') }}</span>
                            </td>
                            <td>
                                <input type="text" name="destination_name[]" id="destination_name_0" class="form-control"
                                    placeholder="Name Of Destination" value="{{ old('destination_name.0') }}" 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_0">
                                <span class="text-danger error-msg" id="destination_name_error_0">{{ $errors->first('destination_name.0') }}</span>
                            </td>

                            <td class="tdCountrySelect" style="display: none">
                                <select class="form-control countrySelect" name="country[]" id="country_0"
                                    data-parsley-trigger="keyup" data-parsley-required data-parsley-required-message="Please select country"
                                    data-parsley-errors-container="#country_error_0">
                                    <option value="">Select Country</option>
                                    @foreach ($countries as $countryData)
                                        <option value="{{ $countryData->id }}" {{ old('country.0') == $countryData->id ? 'selected' : '' }}>
                                            {{ $countryData->country_name }}
                                        </option>
                                    @endforeach
                                </select>
                                <span class="text-danger error-msg" id="country_error_0">{{ $errors->first('country.0') }}</span>
                            </td>
                            <td class="tdStateSelect">
                                <select class="form-control stateSelect" name="state[]" id="state_0"
                                    data-parsley-trigger="keyup" data-parsley-required data-parsley-required-message="Please select state"
                                    data-parsley-errors-container="#state_error_0">
                                    <option value="">Select State</option>
                                    @foreach ($states as $stateData)
                                        <option value="{{ $stateData->id }}" {{ old('state.0') == $stateData->id ? 'selected' : '' }}>
                                            {{ $stateData->state_name }}
                                        </option>
                                    @endforeach
                                </select>
                                <span class="text-danger error-msg" id="state_error_0">{{ $errors->first('state.0') }}</span>
                            </td>
                            <td class="tdDistrictSelect">
                                <select class="form-control districtSelect" name="district[]" id="district_0"
                                    data-parsley-trigger="keyup" data-parsley-required data-parsley-required-message="Please select district"
                                    data-parsley-errors-container="#district_error_0">
                                    <option value="">Select District</option>
                                </select>
                                <span class="text-danger error-msg" id="district_error_0">{{ $errors->first('district.0') }}</span>
                            </td>
                            <td class="tdSubDistrictSelect">
                                <select class="form-control subDistrictSelect" name="sub_district[]" id="sub_district_0"
                                    data-parsley-errors-container="#sub_district_error_0">
                                    <option value="">Select Sub District</option>
                                </select>
                                <span class="text-danger error-msg" id="sub_district_error_0">{{ $errors->first('sub_district.0') }}</span>
                            </td>
                            <td class="tdCitySelect">
                                <select class="form-control citySelect" name="city[]" id="city_0"
                                    data-parsley-errors-container="#city_error_0">
                                    <option value="">Select City</option>
                                </select>
                                <span class="text-danger error-msg" id="city_error_0">{{ $errors->first('city.0') }}</span>
                            </td>
                            <td>
                                <textarea class="form-control" name="remark[]" id="remark_0" rows="3" placeholder="Remark"
                                    data-parsley-required="true" data-parsley-required-message="Please enter remark"
                                    data-parsley-errors-container="#remark_error_0">{{ old('remark.0') }}</textarea>
                                <span class="text-danger error-msg" id="remark_error_0">{{ $errors->first('remark.0') }}</span>
                            </td>
                        </tr>
                    </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">Save</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') }}?time={{ time() }}"></script>
@endsection