@extends('layouts.admin')
@section('content')

@php
    use Carbon\Carbon;
    $start = Carbon::parse($journey->start_date);
    $end = Carbon::parse($journey->end_date);
    $days = $start->diffInDays($end);
@endphp

<!-- Page Title -->
<style>
    .is-invalid {
        border-color: red !important;
    }
</style>

<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between bg-galaxy-transparent">
            <h4 class="mb-sm-0">Create Itinerary</h4>
            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="javascript:void(0);">Home</a></li>
                    <li class="breadcrumb-item"><a href="javascript:void(0);">Itinerary</a></li>
                    <li class="breadcrumb-item active">{{ !empty($journey->id) ? 'Edit' : 'Create' }} Itinerary</li>
                </ol>
            </div>
        </div>
    </div>
</div>

<!-- Form Start -->
<div class="row">
    <div class="col-lg-12">
        <div class="card" id="orderList">
            <div class="card-body">
                <form id="itineraryForm" action="{{ route('admin.itinerary.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="journey_id" value="{{ $journey->id }}" />

                    @for ($i = 0; $i <= $days; $i++)
                        @php
                            $date = $start->copy()->addDays($i)->format('Y-m-d');
                            $dayItineraries = $itineraries->where('date', $date)->values();
                        @endphp

                        <div class="border p-3 mb-4 rounded itinerary-day-block" data-day-index="{{ $i }}">
                            <h5 class="mb-3">Day {{ $i + 1 }} – {{ \Carbon\Carbon::parse($date)->format('d M Y') }}</h5>
                            <input type="hidden" name="itinerary[{{ $i }}][date]" value="{{ $date }}">

                            <div class="slot-wrapper">
                                @if ($dayItineraries->count() > 0)
                                    @foreach ($dayItineraries as $j => $slot)
                                        <div class="row slot-row mb-3">
                                            <div class="col-md-3">
                                                <input type="time" class="form-control" name="itinerary[{{ $i }}][slots][{{ $j }}][start_time]" value="{{ $slot->start_time }}" required>
                                            </div>
                                            <div class="col-md-3">
                                                <input type="time" class="form-control" name="itinerary[{{ $i }}][slots][{{ $j }}][end_time]" value="{{ $slot->end_time }}" required>
                                            </div>
                                            <div class="col-md-5">
                                                <textarea class="form-control" name="itinerary[{{ $i }}][slots][{{ $j }}][description]" rows="1" required>{{ $slot->description }}</textarea>
                                            </div>
                                            <div class="col-md-1">
                                                <button type="button" class="btn btn-danger btn-sm remove-slot {{ $j === 0 ? 'd-none' : '' }}">&times;</button>
                                            </div>
                                        </div>
                                    @endforeach
                                @else
                                    <div class="row slot-row mb-3">
                                        <div class="col-md-3">
                                            <input type="time" class="form-control" name="itinerary[{{ $i }}][slots][0][start_time]" required>
                                        </div>
                                        <div class="col-md-3">
                                            <input type="time" class="form-control" name="itinerary[{{ $i }}][slots][0][end_time]" required>
                                        </div>
                                        <div class="col-md-5">
                                            <textarea class="form-control" name="itinerary[{{ $i }}][slots][0][description]" rows="1" placeholder="Enter description..." required></textarea>
                                        </div>
                                        <div class="col-md-1">
                                            <button type="button" class="btn btn-danger btn-sm remove-slot d-none">&times;</button>
                                        </div>
                                    </div>
                                @endif
                            </div>

                            <button type="button" class="btn btn-primary btn-sm add-slot" data-day-index="{{ $i }}">Add More Slot</button>
                        </div>
                    @endfor

                    <button type="submit" class="btn btn-success">Save Itinerary</button>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection
@section('script')
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/additional-methods.min.js"></script>
<style>
    .is-invalid {
        border-color: red !important;
    }
</style>

<script>
$(document).ready(function () {
    function timesOverlap(start1, end1, start2, end2) {
        return (start1 < end2 && end1 > start2);
    }

    function validateDaySlots(dayIndex) {
        let slots = [];
        let valid = true;

        let dayBlock = $(`.itinerary-day-block[data-day-index="${dayIndex}"]`);
        dayBlock.find('input[type="time"]').removeClass('is-invalid');

        dayBlock.find(".slot-row").each(function () {
            let start = $(this).find('input[name*="[start_time]"]').val();
            let end = $(this).find('input[name*="[end_time]"]').val();

            if (start && end) {
                for (let i = 0; i < slots.length; i++) {
                    if (timesOverlap(start, end, slots[i].start, slots[i].end)) {
                        $(this).find('input[name*="[start_time]"], input[name*="[end_time]"]').addClass('is-invalid');
                        valid = false;
                    }
                }
                slots.push({ start, end });
            }
        });

        return valid;
    }

    $(".add-slot").click(function () {
        let dayIndex = $(this).data("day-index");
        let container = $(this).closest(".itinerary-day-block").find(".slot-wrapper");
        let count = container.find(".slot-row").length;

        let slotHtml = `
            <div class="row slot-row mb-3">
                <div class="col-md-3">
                    <input type="time" class="form-control" name="itinerary[${dayIndex}][slots][${count}][start_time]" required>
                </div>
                <div class="col-md-3">
                    <input type="time" class="form-control" name="itinerary[${dayIndex}][slots][${count}][end_time]" required>
                </div>
                <div class="col-md-5">
                    <textarea class="form-control" name="itinerary[${dayIndex}][slots][${count}][description]" rows="1" required></textarea>
                </div>
                <div class="col-md-1">
                    <button type="button" class="btn btn-danger btn-sm remove-slot">&times;</button>
                </div>
            </div>
        `;
        container.append(slotHtml);
    });

    $(document).on("click", ".remove-slot", function () {
        $(this).closest(".slot-row").remove();
    });

    $(document).on("change", 'input[type="time"]', function () {
        let dayIndex = $(this).closest(".itinerary-day-block").data("day-index");
        validateDaySlots(dayIndex);
    });

    $("#itineraryForm").validate({
        ignore: [],
        submitHandler: function (form) {
            let valid = true;

            $(".itinerary-day-block").each(function () {
                let dayIndex = $(this).data("day-index");
                if (!validateDaySlots(dayIndex)) {
                    valid = false;
                }
            });

            if (!valid) {
               
                Swal.fire({
                            text: "Some slots overlap. Please fix them before submitting.",
                            iconHtml: `<img src="{{ asset('assets/images/error-circle.svg') }}" class="img-fluid">`,
                            confirmButtonText: "OK",
                            customClass: {
                                confirmButton: 'custom-ok-button-class w-sm'
                            }
                        });
                return false;
            }

            $("input[type='time']").each(function () {
                let val = $(this).val();
                if (val.length === 8) $(this).val(val.slice(0, 5));
            });

            let formData = new FormData(form);
            $.ajax({
                url: form.action,
                type: "POST",
                data: formData,
                processData: false,
                contentType: false,
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
                },
                success: function (response) {
                    Swal.fire({
                        iconHtml: `<img src="{{ asset('assets/images/success-circle.svg') }}" class="img-fluid">`,
                        text: response.message,
                        confirmButtonText: "OK",
                        customClass: {
                            confirmButton: 'custom-ok-button-class w-sm'
                        }
                    }).then(() => {
                        window.location.href = "{{ route('admin.itinerary', ['id' => $journey->id]) }}";
                    });
                },
                error: function (xhr) {
                    $(".error").remove(); // remove previous error labels
                    $("input, textarea").removeClass("error"); // remove previous error borders

                    if (xhr.status === 422) {
                        let errors = xhr.responseJSON.errors;
                        $.each(errors, function (key, value) {
                            // Convert 'itinerary.1.slots.1.end_time' => 'itinerary[1][slots][1][end_time]'
                            let inputName = key.replace(/\.(\d+)/g, '[$1]').replace(/\.(\w+)/g, '[$1]');
                            let field = $(`[name="${inputName}"]`);

                            if (field.length) {
                                field.addClass("error");
                                if (field.next("label.error").length === 0) {
                                    field.after(`<label class="error">${value[0]}</label>`);
                                }
                            }
                        });
                    } else {
                        Swal.fire({
                            text: "Something went wrong. Please try later",
                            iconHtml: `<img src="{{ asset('assets/images/error-circle.svg') }}" class="img-fluid">`,
                            confirmButtonText: "OK",
                            customClass: {
                                confirmButton: 'custom-ok-button-class w-sm'
                            }
                        });
                    }
                }

            });

            return false;
        }
    });
});
</script>
@endsection