@extends(session('staff_logged_in') ? 'Staff.layout' : 'Admin.layout')

@section('content')
<div id="alertBox" style="display:none;"></div>
<div class="row align-items-center justify-content-between mb-3 mt-3">
    <div class="col-auto">
        <h5>
            <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                <a href="{{ route('doctor_list') }}">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="icon icon-tabler">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                        <path d="M15 6l-6 6l6 6" />
                    </svg>
                </a>
            </button>
            Edit Doctor
        </h5>
    </div>
</div>

@if(session('error'))
<div class="alert alert-danger">{{ session('error') }}</div>
@endif
@if(session('success'))
<div class="alert alert-success">{{ session('success') }}</div>
@endif

<div class="card border-0 shadow-sm">
    <div class="card-header">
        <h5><i class="ti tabler-calendar-event me-2"></i>Edit Doctor</h5>
    </div>

    <div class="card-body">
        <form id="doctorEditForm" enctype="multipart/form-data">
            @csrf
            @method('PUT')

            {{-- Personal Information --}}
            <div class="section-title mb-4">
                <h5><i class="ti tabler-user me-2"></i>Personal Information</h5>
            </div>

            <div class="row">
                <div class="col-md-6 mb-3">
                    <label class="form-label">Doctor Name *</label>
                    <input type="text" name="doctor_name"
                        class="form-control @error('doctor_name') is-invalid @enderror"
                        value="{{ old('doctor_name', $doctor->doctor_name) }}">
                    @error('doctor_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-6 mb-3">
                    <label class="form-label">Profile Photo</label>
                    <input type="file" name="profile_photo" class="form-control" accept="image/*">
                    @if($doctor->profile_photo)
                    <div class="mt-2">
                        <a href="{{ asset('storage/' . $doctor->profile_photo) }}" target="_blank"
                            class="btn btn-sm btn-outline-primary">
                            <i class="ti tabler-eye me-1"></i> View Uploaded File
                        </a>
                    </div>
                    @else
                    <small class="text-danger">Not Uploaded</small>
                    @endif
                </div>
                <div class="col-md-4 mb-3">
                    <label class="form-label">Gender</label>
                    <select name="gender" class="form-select">
                        <option value="">Select Gender</option>
                        @foreach(['Male','Female','Other'] as $g)
                        <option value="{{ $g }}" {{ old('gender', $doctor->gender) == $g ? 'selected' : '' }}>{{ $g }}
                        </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4 mb-3">
                    <label class="form-label">Date of Birth</label>
                    <input type="date" name="dob" class="form-control" value="{{ old('dob', $doctor->dob) }}">
                </div>
                <div class="col-md-4 mb-3">
                    <label class="form-label">Mobile Number *</label>
                    <input type="text" name="mobile" class="form-control @error('mobile') is-invalid @enderror"
                        value="{{ old('mobile', $doctor->mobile) }}">
                    @error('mobile')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-6 mb-3">
                    <label class="form-label">Email Address</label>
                    <input type="email" name="email" class="form-control" value="{{ old('email', $doctor->email) }}">
                </div>
                <div class="col-md-6 mb-3">
                    <label class="form-label">Address</label>
                    <input type="text" name="address" class="form-control"
                        value="{{ old('address', $doctor->address) }}">
                </div>
            </div>

            {{-- Professional Information --}}
            <div class="section-title my-4">
                <h5><i class="ti tabler-stethoscope me-2"></i>Professional Information</h5>
            </div>

            <div class="row">
                <div class="col-md-4 mb-3">
                    <label class="form-label">Specialization *</label>

                    <select name="specialization" class="form-select @error('specialization') is-invalid @enderror">

                        <option value="">Select Specialization</option>

                        @foreach($specializations as $specialization)
                        <option value="{{ $specialization->specialization_name }}"
                            {{ old('specialization', $doctor->specialization) == $specialization->specialization_name ? 'selected' : '' }}>
                            {{ $specialization->specialization_name }}
                        </option>
                        @endforeach

                    </select>

                    @error('specialization')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-md-4 mb-3">
                    <label class="form-label">Qualification *</label>
                    <input type="text" name="qualification"
                        class="form-control @error('qualification') is-invalid @enderror"
                        value="{{ old('qualification', $doctor->qualification) }}">
                    @error('qualification')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-4 mb-3">
                    <label class="form-label">Experience (Years)</label>
                    <input type="number" name="experience" class="form-control"  min="1"
                        value="{{ old('experience', $doctor->experience) }}">
                </div>
                <div class="col-md-4 mb-3">
                    <label class="form-label">Consultation Fee *</label>
                    <input type="number" name="consultation_fee"
                        class="form-control @error('consultation_fee') is-invalid @enderror"
                        value="{{ old('consultation_fee', $doctor->consultation_fee) }}">
                    @error('consultation_fee')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
            </div>

            {{-- Availability --}}
            <div class="section-title my-4">
                <h5><i class="ti tabler-calendar-time me-2"></i>Availability</h5>
            </div>

            <div class="row">
                <div class="col-md-4 mb-3">
                    <label class="form-label">Available Days</label>
                    <div class="dropdown">
                        @php
                        $selectedDays = old('available_days', $doctor->available_days ?? []);
                        @endphp

                        <button class="btn btn-outline-secondary w-100 text-start dropdown-toggle" type="button"
                            data-bs-toggle="dropdown">
                            {{ !empty($selectedDays) ? implode(', ', $selectedDays) : 'Select Available Days' }}
                        </button>
                        <div class="dropdown-menu p-3 w-100">
                            @foreach(['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'] as $day)
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="available_days[]"
                                    value="{{ $day }}" id="edit_{{ strtolower($day) }}"
                                    {{ in_array($day, old('available_days', $doctor->available_days ?? [])) ? 'checked' : '' }}>

                                <label class="form-check-label" for="edit_{{ strtolower($day) }}">
                                    {{ $day }}
                                </label>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-3">
                    <label class="form-label">Start Time</label>
                    <input type="time" name="start_time" class="form-control"
                        value="{{ old('start_time', $doctor->start_time) }}">
                </div>
                <div class="col-md-4 mb-3">
                    <label class="form-label">End Time</label>
                    <input type="time" name="end_time" class="form-control"
                        value="{{ old('end_time', $doctor->end_time) }}">
                </div>
                <div class="col-md-6 mb-3">
                    <label class="form-label">Online Consultation Available</label>
                    <select name="online_consultation" class="form-select">
                        <option value="No"
                            {{ old('online_consultation', $doctor->online_consultation) == 'No'  ? 'selected' : '' }}>No
                        </option>
                        <option value="Yes"
                            {{ old('online_consultation', $doctor->online_consultation) == 'Yes' ? 'selected' : '' }}>
                            Yes</option>
                    </select>
                </div>
            </div>

            {{-- Document Upload --}}
            <div class="section-title my-4">
                <h5><i class="ti tabler-file-certificate me-2"></i>Document Upload</h5>
            </div>

            <div class="row">
                <div class="col-md-6 mb-3">
                    <label class="form-label">Medical License</label>
                    <input type="file" name="medical_license" class="form-control" accept=".pdf,.jpg,.jpeg,.png">
                    @if($doctor->medical_license)
                    <div class="mt-2">
                        <a href="{{ asset('storage/' . $doctor->medical_license) }}" target="_blank"
                            class="btn btn-sm btn-outline-primary">
                            <i class="ti tabler-eye me-1"></i> View Uploaded File
                        </a>
                    </div>
                    @else
                    <small class="text-danger">Not Uploaded</small>
                    @endif
                </div>
                <div class="col-md-6 mb-3">
                    <label class="form-label">Degree Certificates</label>
                    <input type="file" name="degree_certificates" class="form-control" accept=".pdf,.jpg,.jpeg,.png">
                    @if($doctor->degree_certificates)
                    <div class="mt-2">
                        <a href="{{ asset('storage/' . $doctor->degree_certificates) }}" target="_blank"
                            class="btn btn-sm btn-outline-primary">
                            <i class="ti tabler-eye me-1"></i> View Uploaded File
                        </a>
                    </div>
                    @else
                    <small class="text-danger">Not Uploaded</small>
                    @endif
                </div>
            </div>

            {{-- Status --}}
            <div class="section-title my-4">
                <h5><i class="ti tabler-toggle-left me-2"></i>Status</h5>
            </div>

            <div class="row">
                <div class="col-md-4 mb-3">
                    <label class="form-label">Doctor Status</label>
                    <select name="status" class="form-select">
                        @foreach(['Active','Inactive','On Leave'] as $st)
                        <option value="{{ $st }}" {{ old('status', $doctor->status) == $st ? 'selected' : '' }}>
                            {{ $st }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <hr class="my-4">

            <div class="d-flex justify-content-center align-items-center">

                <div class="d-flex gap-2">
                    <a href="{{ route('doctor_list') }}" class="btn btn-light px-4">Cancel</a>
                    <button type="submit" class="btn btn-primary px-4" id="submitBtn">
                        <i class="ti tabler-device-floppy me-1"></i>
                        <span id="submitText">Save Changes</span>
                    </button>
                </div>
            </div>

        </form>

        <form id="deleteForm" action="{{ url('admin/doctor/' . $doctor->id . '/delete') }}" method="POST">
            @csrf
            @method('DELETE')
        </form>

    </div>
</div>

{{-- Delete Modal --}}
<div class="modal fade" id="confirmDeleteModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <div class="modal-content" style="border-radius:16px;">
            <div class="modal-body text-center p-4">
                <div class="mb-3">
                    <div
                        style="width:60px;height:60px;background:#fff0f0;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto;">
                        <i class="ti tabler-trash" style="font-size:28px;color:#dc3545;"></i>
                    </div>
                </div>
                <h5 class="fw-bold mb-1">Delete Doctor</h5>
                <p class="text-muted mb-4">Are you sure you want to delete <strong>{{ $doctor->doctor_name }}</strong>?
                </p>
                <div class="d-flex gap-2 justify-content-center">
                    <button type="button" class="btn btn-light px-4" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-danger px-4"
                        onclick="document.getElementById('deleteForm').submit();">
                        Yes, Delete
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.card {
    border-radius: 18px;
}

.form-control,
.form-select {
    min-height: 46px;
    border-radius: 10px;
}

.form-control:focus,
.form-select:focus {
    box-shadow: none;
    border-color: #696cff;
}

.section-title {
    border-left: 4px solid #696cff;
    padding-left: 12px;
}

.section-title h5 {
    margin: 0;
    font-weight: 700;
}

.card-header {
    border-bottom: 1px solid #edf1f7;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
$(document).ready(function() {
    const Toast = Swal.mixin({
        toast: true,
        position: 'top-end',
        showConfirmButton: false,
        timer: 3000,
        timerProgressBar: true
    });

    function clearErrors() {
        $('.form-control, .form-select').removeClass('is-invalid');
        $('.invalid-feedback').text('');
    }

    $('#doctorEditForm').on('submit', function(e) {
        e.preventDefault();

        clearErrors();

        const submitBtn = $('#submitBtn');
        const submitText = $('#submitText');

        submitBtn.prop('disabled', true);
        submitText.text('Saving...');

        const formData = new FormData(this);
        formData.append('_method', 'PUT');

        $.ajax({
            url: '{{ url("admin/doctor/" . $doctor->id) }}',
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                if (response.success) {
                    $('#alertBox')
                        .html(`<div class="alert alert-success">${response.message}</div>`)
                        .show();
                    Toast.fire({
                        icon: 'success',
                        title: response.message
                    });

                    setTimeout(function() {
                        window.location.href = '{{ route("doctor_list") }}';
                    }, 1000);
                }
            },
            error: function(xhr) {
                submitBtn.prop('disabled', false);
                submitText.text('Save Changes');

                if (xhr.status === 422) {
                    const errors = xhr.responseJSON.errors;
                    $.each(errors, function(field, messages) {
                        $(`[name="${field}"]`).addClass('is-invalid');
                        $(`[name="${field}"]`).siblings('.invalid-feedback').text(
                            messages[0]);
                        Toast.fire({
                            icon: 'error',
                            title: response.message
                        });
                    });
                } else {
                    $('#alertBox')
                        .html(
                            `<div class="alert alert-danger">Something went wrong. Please try again.</div>`
                        )
                        .show();
                }
            }
        });
    });

});
</script>
@endsection