@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>
            Create Doctor
        </h5>
    </div>
</div>

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

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

    <div class="card-body">
        <form action="{{ route('store_doctor') }}" method="POST" enctype="multipart/form-data">
            @csrf


            <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" placeholder="Enter Doctor Name"
                        value="{{ old('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/*">
                </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>
                        <option value="Male" {{ old('gender') == 'Male'   ? 'selected' : '' }}>Male</option>
                        <option value="Female" {{ old('gender') == 'Female' ? 'selected' : '' }}>Female</option>
                        <option value="Other" {{ old('gender') == 'Other'  ? 'selected' : '' }}>Other</option>
                    </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 @error('dob') is-invalid @enderror" max="{{ date('Y-m-d') }}"
                        value="{{ old('dob') }}">
                         @error('dob')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </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"
                        placeholder="Enter Mobile Number" value="{{ old('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" placeholder="Enter Email Address"
                        value="{{ old('email') }}">
                </div>
                <div class="col-md-6 mb-3">
                    <label class="form-label">Address</label>
                    <input type="text" name="address" class="form-control" placeholder="Enter Address"
                        value="{{ old('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') == $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"
                        placeholder="MBBS, MD, BDS etc." value="{{ old('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" placeholder="Years"
                        value="{{ old('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"
                        placeholder="Consultation Fee" value="{{ old('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', []);
                        @endphp

                        <button id="availableDaysBtn" 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="{{ strtolower($day) }}"
                                    {{ in_array($day, old('available_days', [])) ? 'checked' : '' }}>

                                <label class="form-check-label" for="{{ 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') }}">
                </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') }}">
                </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') == 'No'  ? 'selected' : '' }}>No</option>
                        <option value="Yes" {{ old('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">
                </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">
                </div>
            </div>

            <hr class="my-4">

            <div class="d-flex justify-content-center gap-2">
                <a href="{{ route('doctor') }}" class="btn btn-label-secondary">Cancel</a>
                <button type="submit" class="btn btn-primary" id="submitBtn">
                    <i class="ti tabler-device-floppy me-1"></i>
                    <span id="submitText">Save Doctor</span>
                </button>
            </div>

        </form>
    </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('');
    }

});

$(document).on('change', 'input[name="available_days[]"]', function () {

    let selected = [];

    $('input[name="available_days[]"]:checked').each(function () {
        selected.push($(this).val());
    });

    $('#availableDaysBtn').text(
        selected.length ? selected.join(', ') : 'Select Available Days'
    );

});
</script>
<script>
$(document).ready(function () {

    $('form').on('submit', function () {

        let btn = $('#submitBtn');

        if (btn.prop('disabled')) {
            return false;
        }

        btn.prop('disabled', true);

        btn.html(`
            <span class="spinner-border spinner-border-sm me-1"></span>
            Processing...
        `);

        return true;
    });

});
</script>
@endsection