@extends('layout.app')
@include('includes.select2')
@section('title', 'Edit Doctor | Waiting Room')

@section('content')
    <style>
        .p-2 {
            padding: 90px;
        }

        #imagePreview img {
            height: 120px;
            width: 120px;
            object-fit: cover;
        }

        .input-wrapper {
            position: relative;
        }

        .input-wrapper .form-control {
            padding-right: 40px;
        }

        .input-wrapper .toggle-password {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 2;
            cursor: pointer;
            background: none;
        }

        .custom-select-wrapper {
            position: relative;
        }

        .custom-select-wrapper select {
            padding-right: 30px;
        }

        .custom-select-wrapper .dropdown-icon {
            position: absolute;
            top: 50%;
            right: 10px;
            transform: translateY(-50%);
            pointer-events: none;
        }

        .workingHours {
            background: #fefefe;
            padding: 30px 20px;
            border: 1px solid #ccc;
            border-radius: 4px;
            margin: 7px 0px !important;
            position: relative;
        }

        button.btn.btn-danger.delete-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            height: 30px;
            width: 30px;
            text-align: center;
            padding: 0px;
        }
    </style>

    <div class="container-fluid my-2 p-0 text-end">
        <a class="btn btn-primary" href="{{ route('barbers') }}">Back</a>
    </div>
    <div class="row page-titles">
        <ol class="breadcrumb">
            <li class="breadcrumb-item active"><a href="{{ route('dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="javascript:void(0)">Edit Doctor</a></li>
        </ol>
    </div>
    <form id="editUser" enctype="multipart/form-data">
        <div class="row">
            <div class="col-xl-12">
                <div class="row">
                    <div class="col-xl-8">
                        <div class="card h-auto">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="mb-3">
                                            <label class="form-label">Name</label>
                                            <input type="text" class="form-control" name="name" placeholder="Name"
                                                value="{{ $UserData->name }}" required>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="mb-3">
                                            <label class="form-label">Email</label>
                                            <input type="email" class="form-control" name="email"
                                                placeholder="Email Address" value="{{ $UserData->email }}" required>
                                        </div>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Bio</label>
                                    <textarea class="form-control" name="bio" rows="3" required>{{ $UserData->bio }}</textarea>
                                </div>
                            </div>
                        </div>
                        <div class="card h-auto">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="mb-3">
                                            <label class="form-label">Service Time (Minutes)</label>
                                            <input type="number" class="form-control" id="service_time" name="service_time"
                                                placeholder="Enter Service Time" min="5"
                                                value="{{ $UserData->queue_adjustment_time }}" required>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="mb-3">
                                            <label class="form-label">Queue Adjustment Booking (Number)</label>
                                            <input type="number" class="form-control" id="queue_adjustment_number"
                                                name="queue_adjustment_number"
                                                placeholder="Queue Adjustment Booking (Number)" min="0"
                                                value="{{ $UserData->queue_adjustment_number }}" required>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="mb-3">
                                            <label class="form-label">Service Charges</label>
                                            <div class="input-group">
                                                <span class="input-group-text">$</span>
                                                <input type="number" class="form-control" name="price" min="0"
                                                    id="price" placeholder="Enter Service Charges e.g., 20"
                                                    value="{{ $UserData->ServiceCharges->first()->price }}" required />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="mb-3">
                                            <label class="form-label" for="country">Country</label>
                                            <select class="form-control" name="country" id="country" required>
                                                <option selected disabled>-- Select Country --</option>
                                                @forelse ($countries as $country)
                                                    <option value="{{ $country->name }}"
                                                        {{ $UserData->country == $country->name ? 'selected' : '' }}>
                                                        {{ $country->name }}</option>
                                                @empty
                                                    <option value="" disabled>No Country</option>
                                                @endforelse
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Specialty</label>
                                    <select class="js-example-basic-multiple form-control mt-2 mb-2 p-2"
                                        name="specialities[]" multiple="multiple" id="specialities" required>
                                        @foreach ($specialities as $speciality)
                                            <option value="{{ $speciality->id }}"
                                                {{ in_array($speciality->id, $userServices) ? 'selected' : '' }}>
                                                {{ $speciality->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="filter cm-content-box box-primary">
                            <div class="content-title SlideToolHeader">
                                <div class="cpa">Add Working Hours</div>
                                <div class="tools">
                                    <a href="javascript:void(0);" class="expand handle"></a>
                                </div>
                            </div>
                            <div class="cm-content-body form excerpt">
                                <div class="card-body">
                                    <div id="workingHoursContainer">
                                        @foreach ($UserData->WorkingDays as $workingDay)
                                            <div class="workingHours row">
                                                <div class="col-xl-6 col-sm-4">
                                                    <label class="form-label">Day</label>
                                                    <select class="form-control mb-4 day-select" name="day[]">
                                                        @php
                                                            $daysOfWeek = [
                                                                'Monday',
                                                                'Tuesday',
                                                                'Wednesday',
                                                                'Thursday',
                                                                'Friday',
                                                                'Saturday',
                                                                'Sunday',
                                                            ];
                                                        @endphp
                                                        @foreach ($daysOfWeek as $day)
                                                            <option value="{{ $day }}"
                                                                {{ $workingDay->day == $day ? 'selected' : '' }}>
                                                                {{ $day }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col-xl-3 col-sm-3">
                                                    <label class="form-label">From</label>
                                                    <input type="time" class="form-control" name="from[]"
                                                        value="{{ $workingDay->from }}" required>
                                                </div>
                                                <div class="col-xl-3 col-sm-3">
                                                    <label class="form-label">To</label>
                                                    <input type="time" class="form-control" name="to[]"
                                                        value="{{ $workingDay->to }}" required>
                                                </div>
                                                <div class="col-xl-6 col-sm-2">
                                                    <label class="form-label">Break</label>
                                                    <select class="form-control break-select" name="break[]">
                                                        <option value="On"
                                                            {{ $workingDay->break == 'On' ? 'selected' : '' }}>On</option>
                                                        <option value="Off"
                                                            {{ $workingDay->break == 'Off' ? 'selected' : '' }}>Off
                                                        </option>
                                                    </select>
                                                </div>
                                                {{-- <div class="break-fields"
                                                    style="{{ $workingDay->break == 'Off' ? 'display:none;' : '' }}"> --}}
                                                <div class="col-xl-3 col-sm-3 break-field"
                                                    style="{{ $workingDay->break == 'Off' ? 'display:none;' : '' }}">
                                                    <label class="form-label">From</label>
                                                    <input type="time" class="form-control" name="break_from[]"
                                                        value="{{ $workingDay->break_from }}">
                                                </div>
                                                <div class="col-xl-3 col-sm-3 break-field"
                                                    style="{{ $workingDay->break == 'Off' ? 'display:none;' : '' }}">
                                                    <label class="form-label">To</label>
                                                    <input type="time" class="form-control" name="break_to[]"
                                                        value="{{ $workingDay->break_to }}">
                                                </div>
                                                {{-- </div> --}}
                                                <div class="col-xl-2 mt-4">
                                                    <button type="button" class="btn btn-danger delete-btn btn-xs"><i
                                                            class="fa fa-trash"></i></button>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                    <button type="button" id="addBtn" class="btn btn-primary btn-sm mt-3">Add Working
                                        Hours</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4">
                        <div class="right-sidebar-sticky">
                            <div class="filter cm-content-box box-primary">
                                <div class="content-title SlideToolHeader">
                                    <div class="cpa">Profile Image</div>
                                    <div class="tools">
                                        <a href="javascript:void(0);" class="expand handle"></a>
                                    </div>
                                </div>
                                <div class="cm-content-body publish-content form excerpt">
                                    <div class="card-body">
                                        <div class="avatar-upload d-flex align-items-center">
                                            <div class="position-relative">
                                                <div class="avatar-preview">
                                                    <div id="imagePreview"
                                                        style="width: 120px; height: 120px; background-size: cover; background-position: center; border-radius: 10%;">
                                                        <img src="{{ asset($UserData->image ?? 'assets/profile-placeholder.jpeg') }}"
                                                            alt="">
                                                    </div>
                                                </div>
                                                <div class="change-btn d-flex align-items-center flex-wrap">
                                                    <input type='file' class="form-control d-none" id="imageUpload"
                                                        name="profile_image" accept=".png, .jpg, .jpeg">
                                                    <label for="imageUpload"
                                                        class="btn btn-primary light btn-sm ms-0">Select Image</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="filter cm-content-box box-primary">
                                <div class="content-title SlideToolHeader">
                                    <div class="cpa">Published</div>
                                    <div class="tools">
                                        <a href="javascript:void(0);" class="expand handle"></a>
                                    </div>
                                </div>
                                <div class="cm-content-body publish-content form excerpt">
                                    <div class="card-body py-3">
                                        <ul class="list-style-1 block">
                                            <li>
                                                <div>
                                                    <label class="form-label mb-0 me-2">
                                                        <i class="fa-solid fa-key me-2"></i>
                                                        Status:
                                                    </label>
                                                    <span
                                                        class="font-w500">{{ $UserData->status == 1 ? 'Active' : 'Inactive' }}</span>
                                                    <a href="javascript:void(0);" class="badge badge-primary light ms-3"
                                                        id="headingOne" data-bs-toggle="collapse"
                                                        data-bs-target="#collapseOne" aria-controls="collapseOne"
                                                        aria-expanded="true" role="button">Edit</a>
                                                </div>
                                                <div id="collapseOne" class="collapse" aria-labelledby="headingOne"
                                                    data-bs-parent="#accordion-one">
                                                    <div class="border rounded p-3 mt-3">
                                                        <div class="mb-2">
                                                            <label class="form-label w-100">Select Status</label>
                                                            <select class="form-control solid default-select"
                                                                name="status">
                                                                <option value="1"
                                                                    {{ $UserData->status == 1 ? 'selected' : '' }}>Active
                                                                </option>
                                                                <option value="0"
                                                                    {{ $UserData->status == 0 ? 'selected' : '' }}>Inactive
                                                                </option>
                                                            </select>
                                                        </div>
                                                        <div class="mt-3">
                                                            <button class="btn btn-primary btn-sm me-2" type="button"
                                                                data-bs-toggle="collapse" data-bs-target="#collapseOne"
                                                                aria-expanded="false"
                                                                aria-controls="collapseOne">Ok</button>
                                                            <button class="btn btn-danger light btn-sm" type="button"
                                                                data-bs-toggle="collapse" data-bs-target="#collapseOne"
                                                                aria-expanded="false"
                                                                aria-controls="collapseOne">Cancel</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="border-bottom-0">
                                                <div>
                                                    <label class="form-label mb-0 me-2">
                                                        <i class="fa-solid fa-calendar-days me-2"></i>
                                                        Created Date:
                                                    </label>
                                                    <span class="font-w500">
                                                        {{ $UserData->created_at->format('d-m-Y H:i:s') }}</span>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="card-footer border-top text-end py-3">
                                        <button type="submit" id="editUserBtn" class="btn btn-primary btn-sm">Update
                                            Doctor</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
@endsection
@section('custom-script')
    @include('includes.selet2js')
    <script>
        $(document).ready(function() {
            const daysOfWeek = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];

            function getNextDay(currentDay) {
                let currentIndex = daysOfWeek.indexOf(currentDay);
                let nextIndex = (currentIndex + 1) % daysOfWeek.length;
                return daysOfWeek[nextIndex];
            }

            function updateDayOptions() {
                $('.workingHours').each(function(index) {
                    let daySelect = $(this).find('.day-select');
                    daySelect.empty();
                    for (let day of daysOfWeek) {
                        daySelect.append(new Option(day, day));
                    }
                    if (index > 0) {
                        let previousDay = $('.workingHours').eq(index - 1).find('.day-select').val();
                        let nextDay = getNextDay(previousDay);
                        daySelect.val(nextDay);
                    } else {
                        daySelect.val('Monday');
                    }
                });
            }

            function toggleBreakFields(select) {
                let breakFields = $(select).closest('.workingHours').find('.break-field');
                if ($(select).val() === "On") {
                    breakFields.show();
                } else {
                    breakFields.hide();
                }
            }

            $('#addBtn').click(function() {
                let lastWorkingHours = $('.workingHours').last();
                let cloned = lastWorkingHours.clone();
                let currentDay = lastWorkingHours.find('.day-select').val();
                let nextDay = getNextDay(currentDay);
                if ($('.workingHours').length < 7) {

                    cloned.find('.day-select').val(nextDay);
                    cloned.find('input[type="time"]').val('');
                    cloned.appendTo('#workingHoursContainer');
                    updateDayOptions();
                    toggleBreakFields(cloned.find('.break-select'));
                    validateTime(); // Re-apply validation for new inputs

                } else {
                    notyf.error({
                        message: ('You can add maximum 7 rows of working hours.'),
                        duration: 3000
                    });
                }
            });

            function deleteRow() {
                if ($('.workingHours').length > 1) {
                    $(this).closest('.workingHours').remove();
                    updateDayOptions();
                } else {
                    // alert('You must have at least one working hour record.');
                    notyf.error({
                        message: ('You must have at least one working hour record.'),
                        duration: 3000
                    });
                }
            }

            validateTime();

            var tooltipTriggerList = [].slice.call($('[data-bs-toggle="tooltip"]'));
            var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl);
            });


            function validateTime() {
                const fromInputs = $('.from-time');
                const toInputs = $('.to-time');

                fromInputs.each((index, fromInput) => {
                    $(fromInput).on('blur', function() { // Changed to 'blur' event
                        if ($(this).val() && $(toInputs[index]).val() && $(this).val() >= $(
                                toInputs[index]).val()) {
                            $(this).val('');
                            notyf.error({
                                message: 'The "From" time must be earlier than the "To" time.',
                                duration: 3000
                            });
                        }
                    });
                });

                toInputs.each((index, toInput) => {
                    $(toInput).on('blur', function() { // Changed to 'blur' event
                        if ($(fromInputs[index]).val() && $(this).val() && $(fromInputs[index])
                            .val() >= $(this).val()) {
                            notyf.error({
                                message: 'The "From" time must be earlier than the "To" time.',
                                duration: 3000
                            });
                            $(this).val('');
                        }
                    });
                });
            }

            $(document).on('click', '.delete-btn', deleteRow);

            $(document).on('change', '.break-select', function() {
                toggleBreakFields(this);
            });

            $('.workingHours').each(function() {
                toggleBreakFields($(this).find('.break-select'));
            });

            $("#editUser").on('submit', function(e) {
                e.preventDefault();
                const btn = $("#editUserBtn");
                let formData = new FormData($("#editUser")[0]);
                $.ajax({
                    type: "POST",
                    url: "{{ route('barbers.update', $UserData->id) }}",
                    dataType: 'json',
                    contentType: false,
                    processData: false,
                    cache: false,
                    data: formData,
                    beforeSend: function() {
                        btn.prop('disabled', true);
                        btn.html(
                            '<div class="spinner-border" role="status" style="height: 14px;width: 14px;accent-color: ;"> <span class="visually-hidden">Loading...</span> </div>'
                        );
                        $('.error-message').html('');
                    },
                    success: function(res) {
                        if (res.success === true) {
                            btn.prop('disabled', false);
                            btn.html('Update Doctor');
                            notyf.success({
                                message: res.message,
                                duration: 3000
                            });
                            setTimeout(function() {
                                window.location.href = "{{ route('barbers') }}";
                            }, 2000);
                        } else {
                            btn.prop('disabled', false);
                            btn.html('Update Doctor');
                            notyf.error({
                                message: res.message,
                                duration: 3000
                            });
                        }
                    },
                    error: function(e) {
                        btn.prop('disabled', false);
                        btn.html('Update Doctor');
                    },
                    headers: {
                        'X-CSRF-TOKEN': "{{ csrf_token() }}"
                    }
                });
            });

            $('.js-example-basic-multiple').select2();
            $('#country').select2();

            document.getElementById("imageUpload").addEventListener("change", function(event) {
                let file = event.target.files[0];
                if (file) {
                    let reader = new FileReader();
                    reader.onload = function(e) {
                        let imagePreview = document.getElementById("imagePreview");
                        while (imagePreview.firstChild) {
                            imagePreview.removeChild(imagePreview.firstChild);
                        }
                        imagePreview.style.backgroundImage = `url(${e.target.result})`;
                    };
                    reader.readAsDataURL(file);
                }
            });
        });
    </script>
@endsection