@extends('backend.master')
@section('title', 'Update Passenger')
@push('style')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/themes/material_blue.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/css/dropify.min.css" />
<style>
    .dropify-wrapper {
        border-radius: 5px;
        border: 1px dashed #3b71ca;
    }

    .dropify-wrapper .dropify-message p {
        font-weight: 500;
        color: #3b71ca;
    }

    .dropify-wrapper .dropify-message span.file-icon {
        color: #3b71ca;
    }

    .invalid-feedback {
        display: block;
        font-weight: 500;
    }

</style>
@endpush
@section('content')
<div class="container">
    <div class="page-inner">
        <div class="row">
            <div class="col-md-12">
                <div class="card card-round">
                    <div class="card-header project-details-card-header py-2 d-flex align-items-center justify-content-between">
                        <div>
                            <h4 class="project-details-card-header-title mb-0"> Update Passenger</h4>
                        </div>
                        <div>
                            <a href="{{ route('passenger.index') }}" class="btn btn-primary btn-sm" title="List">
                                <span class="btn-label">
                                    <i class="fas fa-users"></i>
                                </span>
                                Passenger List
                            </a>
                            <button class="btn btn-black btn-sm" title="Go Back" onclick="history.back();">
                                <span class="btn-label">
                                    <i class="fas fa-reply"></i>
                                </span>
                                Go Back
                            </button>
                        </div>
                    </div>
                    <div class="card-body">
<form id="passengerForm"
      action="{{ route('passenger.update', $passenger->id) }}"
      method="POST">
    @csrf

    <div class="row mb-3">
        <div class="col-md-2">
            <label>Title</label>
            <select name="title" class="form-control">
                <option value="MR" {{ old('title',$passenger->title)=='MR'?'selected':'' }}>MR</option>
                <option value="MRS" {{ old('title',$passenger->title)=='MRS'?'selected':'' }}>MRS</option>
                <option value="MS" {{ old('title',$passenger->title)=='MS'?'selected':'' }}>MS</option>
            </select>
            @error('title') <small class="text-danger">{{ $message }}</small> @enderror
        </div>

        <div class="col-md-5">
            <label>Given Name / First Name</label>
            <input type="text"
                   name="first_name"
                   class="form-control"
                   value="{{ old('first_name',$passenger->first_name) }}"
                   required>
            @error('first_name') <small class="text-danger">{{ $message }}</small> @enderror
        </div>

        <div class="col-md-5">
            <label>Surname / Last Name</label>
            <input type="text"
                   name="last_name"
                   class="form-control"
                   value="{{ old('last_name',$passenger->last_name) }}"
                   required>
            @error('last_name') <small class="text-danger">{{ $message }}</small> @enderror
        </div>
    </div>

    <div class="row mb-3">
        <div class="col-md-4">
            <label>Mobile No</label>
            <input type="text"
                   name="mobile_no"
                   class="form-control"
                   value="{{ old('mobile_no',$passenger->mobile_no) }}"
                   required>
            @error('mobile_no') <small class="text-danger">{{ $message }}</small> @enderror
        </div>

        <div class="col-md-4">
            <label>Email</label>
            <input type="email"
                   name="email"
                   class="form-control"
                   value="{{ old('email',$passenger->email) }}">
            @error('email') <small class="text-danger">{{ $message }}</small> @enderror
        </div>

        <div class="col-md-4">
            <label>Date of Birth</label>
            <input type="text"
                   name="date_of_birth"
                   class="flat_date form-control"
                   value="{{ old('date_of_birth',$passenger->date_of_birth) }}"
                   placeholder="YYYY-MM-DD">
            @error('date_of_birth') <small class="text-danger">{{ $message }}</small> @enderror
        </div>
    </div>

    <h6>Passport Details</h6>

    <div class="row mb-3">
        <div class="col-md-4">
            <label>Passport No</label>
            <input type="text"
                   name="passport_no"
                   class="form-control"
                   value="{{ old('passport_no',$passenger->passport_no) }}">
        </div>

        <div class="col-lg-4">
            <label class="form-label">Nationality</label>
            <select name="nationality_id"
                    class="form-control select2"
                    data-placeholder="Select Nationality">
                <option value=""></option>
                @foreach($countries as $country)
                    <option value="{{ $country->id }}"
                        {{ old('nationality_id',$passenger->nationality_id) == $country->id ? 'selected' : '' }}>
                        {{ $country->name }}
                    </option>
                @endforeach
            </select>
            @error('nationality_id')
                <small class="text-danger">{{ $message }}</small>
            @enderror
        </div>

        <div class="col-md-4">
            <label>Passport Expiry</label>
            <input type="text"
                   name="passport_expiry"
                   class="flat_date form-control"
                   value="{{ old('passport_expiry',$passenger->passport_expiry) }}"
                   placeholder="YYYY-MM-DD">
        </div>
    </div>

    <div class="col-12 text-end mt-3">
        <button type="submit" id="saveBtn" class="btn btn-info">
            <i class="fas fa-save me-1"></i>
            <span class="btn-text">Update Passenger</span>
        </button>
    </div>
</form>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@push('script')
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/js/dropify.min.js"></script>
<script>
    flatpickr(".flat_date", {
        dateFormat: "Y-m-d"
        , minDate: "today"
    });
</script>
<script>
    $(document).ready(function() {
        $('.select2').each(function() {
            $(this).select2({
                placeholder: $(this).data('placeholder')
                , allowClear: true
                , width: '100%'
                , theme: 'bootstrap'
            });
        });
    });
</script>
<script>
const passengerForm = document.getElementById('passengerForm');

if (passengerForm) {
    passengerForm.addEventListener('submit', function (e) {
        e.preventDefault();

        let form = this;
        let formData = new FormData(form);

        Swal.fire({
            title: 'Saving Passenger',
            text: 'Please wait...',
            allowOutsideClick: false,
            didOpen: () => {
                Swal.showLoading();
            }
        });

        fetch(form.action, {
            method: 'POST',   // works for both store & update
            headers: {
                'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value,
                'Accept': 'application/json'
            },
            body: formData
        })
        .then(async response => {
            if (!response.ok) {
                const data = await response.json();
                throw data;
            }
            return response.json();
        })
        .then(data => {
            Swal.fire({
                icon: 'success',
                title: 'Success',
                text: data.message,
                timer: 1800,
                showConfirmButton: false
            }).then(() => {
                if (data.redirect) {
                    window.location.href = data.redirect;
                }
            });
        })
        .catch(error => {
            let msg = 'Something went wrong';

            if (error.errors) {
                msg = Object.values(error.errors)
                    .map(e => e[0])
                    .join('\n');
            } else if (error.message) {
                msg = error.message;
            }

            Swal.fire({
                icon: 'error',
                title: 'Validation Error',
                text: msg
            });
        });
    });
}
</script>

@endpush
