@extends('layouts.app')

@section('title', 'Edit Booking')

@section('page-wrapper')
    <!-- Page Header with Breadcrumb -->
    <div class="page-header d-print-none">
        <div class="container-fluid">
            <div class="row g-2 align-items-center">
                <div class="col">
                    <!-- Breadcrumb -->
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item">
                                <a href="{{ route('dashboard') }}">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24"
                                        viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                                        stroke-linecap="round" stroke-linejoin="round">
                                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                        <path d="M5 12l-2 0l9 -9l9 9l-2 0" />
                                        <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
                                        <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
                                    </svg>
                                    Dashboard
                                </a>
                            </li>
                            <li class="breadcrumb-item">
                                <a href="{{ route('couriers.index') }}">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                        stroke-linecap="round" stroke-linejoin="round"
                                        class="icon icon-tabler icons-tabler-outline icon-tabler-package-import">
                                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                        <path d="M12 21l-8 -4.5v-9l8 -4.5l8 4.5v4.5" />
                                        <path d="M12 12l8 -4.5" />
                                        <path d="M12 12v9" />
                                        <path d="M12 12l-8 -4.5" />
                                        <path d="M22 18h-7" />
                                        <path d="M18 15l-3 3l3 3" />
                                    </svg>
                                    Booking
                                </a>
                            </li>
                            <li class="breadcrumb-item active" aria-current="page">Edit</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>

    <!-- Page Body -->
    <div class="page-body">
        <div class="container-fluid">
            <div class="row">
                <!-- Card -->
                <div class="col-md-6 col-12">

                    <div class="card">
                        <!-- Card Header -->
                        <div class="card-header">
                            <h3 class="card-title">Edit Booking</h3>
                        </div>
                        <form id="courierForm" action="{{ route('couriers.update', $courier->id) }}" method="POST"
                            enctype="multipart/form-data">
                            @csrf
                            @method('PUT')
                            <div class="card-body">
                                <div class="row">
                                    <!-- Vendor Name -->
                                    <div class="mb-3 col-md-12">
                                        <label for="name" class="form-label required">Name</label>
                                        <input type="text" class="form-control @error('name') is-invalid @enderror"
                                            id="name" name="name" value="{{ old('name', $courier->name) }}"
                                            required>
                                        @error('name')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="row">
                                    <!-- Booking Logo -->
                                    <div class="mb-3 col-12" id="logo">
                                        <label for="logo" class="form-label required">Booking Logo</label>
                                        <input type="file" class="form-control @error('logo') is-invalid @enderror"
                                            id="logo" name="logo" accept="image/*">
                                        <small class="form-hint">Preferred size: 250px x 250px (JPG, JPEG, PNG
                                            allowed).</small>
                                        @error('logo')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                        <div class="mt-3">
                                            <img id="logoPreview"
                                                src="{{ $courier->logo ? asset('storage/' . $courier->logo) : '#' }}"
                                                alt="Logo Preview"
                                                style="display: {{ $courier->logo ? 'block' : 'none' }}; max-width: 150px; max-height: 150px; border: 1px solid #ddd; padding: 5px; border-radius: 4px;">
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <label for="status" class="form-label required">Status</label>
                                        <div>
                                            <label class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" id="status_active"
                                                    name="status" value="Active"
                                                    {{ old('status', $courier->status) === 'Active' ? 'checked' : '' }}>
                                                <span class="form-check-label" for="status_active">Active</span>
                                            </label>
                                            <label class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" id="status_inactive"
                                                    name="status" value="Inactive"
                                                    {{ old('status', $courier->status) === 'Inactive' ? 'checked' : '' }}>
                                                <span class="form-check-label" for="status_inactive">Inactive</span>
                                            </label>
                                        </div>
                                        @error('status')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <!-- Card Footer -->
                            <div class="card-footer">
                                <button type="submit" class="btn btn-primary me-3">Save</button>
                                <a href="{{ route('couriers.index') }}" class="btn">Cancel</a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
@endsection

@section('scripts')
    <script>
        var citySelect = null;
        // @formatter:off
        document.addEventListener("DOMContentLoaded", function() {
            var el;
            window.TomSelect && (new TomSelect(el = document.getElementById('select-people'), {
                copyClassesToDropdown: false,
                dropdownParent: 'body',
                controlInput: '<input>',
                render: {
                    item: function(data, escape) {
                        if (data.customProperties) {
                            return '<div><span class="dropdown-item-indicator">' + data
                                .customProperties + '</span>' + escape(data.text) + '</div>';
                        }
                        return '<div>' + escape(data.text) + '</div>';
                    },
                    option: function(data, escape) {
                        if (data.customProperties) {
                            return '<div><span class="dropdown-item-indicator">' + data
                                .customProperties + '</span>' + escape(data.text) + '</div>';
                        }
                        return '<div>' + escape(data.text) + '</div>';
                    },
                },
            }));
        });
        // @formatter:on

        // @formatter:off
        document.addEventListener("DOMContentLoaded", function() {
            var el;
            window.TomSelect && (new TomSelect(el = document.getElementById('category_id'), {
                copyClassesToDropdown: false,
                dropdownParent: 'body',
                controlInput: '<input>',
                render: {
                    item: function(data, escape) {
                        if (data.customProperties) {
                            return '<div><span class="dropdown-item-indicator">' + data
                                .customProperties + '</span>' + escape(data.text) + '</div>';
                        }
                        return '<div>' + escape(data.text) + '</div>';
                    },
                    option: function(data, escape) {
                        if (data.customProperties) {
                            return '<div><span class="dropdown-item-indicator">' + data
                                .customProperties + '</span>' + escape(data.text) + '</div>';
                        }
                        return '<div>' + escape(data.text) + '</div>';
                    },
                },
            }));
        });
        // @formatter:on

        // @formatter:off
        document.addEventListener("DOMContentLoaded", function() {
            citySelect = new TomSelect("#city_ids", {
                copyClassesToDropdown: false,
                dropdownParent: 'body',
                controlInput: '<input>',
                render: {
                    item: function(data, escape) {
                        return '<div>' + (data.customProperties ?
                            '<span class="dropdown-item-indicator">' + data.customProperties +
                            '</span>' : '') + escape(data.text) + '</div>';
                    },
                    option: function(data, escape) {
                        return '<div>' + (data.customProperties ?
                            '<span class="dropdown-item-indicator">' + data.customProperties +
                            '</span>' : '') + escape(data.text) + '</div>';
                    },
                },
            });
            // var el;
            // window.TomSelect && (new TomSelect(el = document.getElementById('city_ids'), {
            //     copyClassesToDropdown: false,
            //     dropdownParent: 'body',
            //     controlInput: '<input>',
            //     render: {
            //         item: function(data, escape) {
            //             if (data.customProperties) {
            //                 return '<div><span class="dropdown-item-indicator">' + data
            //                     .customProperties + '</span>' + escape(data.text) + '</div>';
            //             }
            //             return '<div>' + escape(data.text) + '</div>';
            //         },
            //         option: function(data, escape) {
            //             if (data.customProperties) {
            //                 return '<div><span class="dropdown-item-indicator">' + data
            //                     .customProperties + '</span>' + escape(data.text) + '</div>';
            //             }
            //             return '<div>' + escape(data.text) + '</div>';
            //         },
            //     },
            // }));
        });
        // @formatter:on

        // @formatter:off
        document.addEventListener("DOMContentLoaded", function() {
            let options = {
                selector: '#terms_conditions',
                height: 300,
                menubar: false,
                statusbar: false,
                plugins: [
                    'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview', 'anchor',
                    'searchreplace', 'visualblocks', 'code', 'fullscreen', 'insertdatetime', 'media',
                    'table', 'code', 'help', 'wordcount'
                ],
                toolbar: 'bold italic underline bullist numlist | alignleft aligncenter ' +
                    'alignright alignjustify | outdent indent | ' +
                    'undo redo | ' +
                    'removeformat fullscreen | blocks',
                content_style: 'body { font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; }'
            }
            if (localStorage.getItem("tablerTheme") === 'dark') {
                options.skin = 'oxide-dark';
                options.content_css = 'dark';
            }
            tinyMCE.init(options);
        })
        // @formatter:on

        // @formatter:off
        document.addEventListener("DOMContentLoaded", function() {
            window.Litepicker && (new Litepicker({
                element: document.getElementById('holiday_date'),
                buttonText: {
                    previousMonth: `<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 6l-6 6l6 6" /></svg>`,
                    nextMonth: `<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 6l6 6l-6 6" /></svg>`,
                },
                format: 'DD MMM YYYY',
            }));
        });
        // @formatter:on

        // Preview New Photos
        document.getElementById('photos').addEventListener('change', function(event) {
            const previewContainer = document.getElementById('photoPreview');
            previewContainer.innerHTML = ""; // Clear previous previews
            let selectedFiles = Array.from(event.target.files);

            // Check if there are any files selected
            if (selectedFiles.length > 0) {
                previewContainer.classList.add('mt-3');
            } else {
                previewContainer.classList.remove('mt-3');
            }

            // Create an array to track files that should be uploaded
            let filesToUpload = [...selectedFiles];

            // Display image previews and the remove buttons
            selectedFiles.forEach((file, index) => {
                const reader = new FileReader();
                reader.onload = function(e) {
                    // Create a wrapper div for image and remove button
                    const wrapper = document.createElement('div');
                    wrapper.classList.add('d-flex', 'flex-column', 'align-items-center');

                    // Create the image element
                    const img = document.createElement('img');
                    img.src = e.target.result;
                    img.alt = "Photo";
                    img.style.cssText =
                        "width: 100px; height: 100px; object-fit: cover; cursor: pointer;";

                    // Create the remove button
                    const removeButton = document.createElement('button');
                    removeButton.type = 'button';
                    removeButton.classList.add('btn', 'btn-sm', 'btn-danger', 'mt-1', 'w-100',
                        'flex-1');
                    removeButton.textContent = 'Remove';

                    // Attach click event to remove the image
                    removeButton.addEventListener('click', function() {
                        wrapper.remove(); // Remove the wrapper div
                        // Remove file from the filesToUpload array
                        filesToUpload = filesToUpload.filter((f, i) => i !== index);

                        // Update the file input with the remaining files
                        updateFileInput(filesToUpload);
                    });

                    // Append image and button to wrapper
                    wrapper.appendChild(img);
                    wrapper.appendChild(removeButton);

                    // Append wrapper to preview container
                    previewContainer.appendChild(wrapper);
                };
                reader.readAsDataURL(file);
            });

            // Function to update the file input with the remaining files
            function updateFileInput(files) {
                const fileInput = document.getElementById('photos');
                const dataTransfer = new DataTransfer();
                files.forEach((file) => dataTransfer.items.add(file));
                fileInput.files = dataTransfer.files; // Update the file input with the new file list
            }

            // Array.from(event.target.files).forEach((file, index) => {
            //     const reader = new FileReader();
            //     reader.onload = function(e) {
            //         // Create a wrapper div for image and remove button
            //         const wrapper = document.createElement('div');
            //         wrapper.classList.add('d-flex', 'flex-column', 'align-items-center', 'mb-3');
            //         // wrapper.style.cssText =
            //         //     "display: flex; flex-direction: column; align-items: center; margin-bottom: 15px;";

            //         // Create the image element
            //         const img = document.createElement('img');
            //         img.src = e.target.result;
            //         img.alt = "Photo";
            //         img.style.cssText =
            //             "width: 100px; height: 100px; object-fit: cover; cursor: pointer;";

            //         // Create the remove button
            //         const removeButton = document.createElement('button');
            //         removeButton.type = 'button';
            //         removeButton.classList.add('btn', 'btn-sm', 'btn-danger', 'mt-1', 'w-100', 'flex-1');
            //         removeButton.textContent = 'Remove';

            //         // Attach click event to remove the image
            //         removeButton.addEventListener('click', function() {
            //             wrapper.remove(); // Remove the wrapper div
            //             fileInput.files = removeFileFromFileList(fileInput.files,
            //             index); // Update file input
            //         });

            //         // Append image and button to wrapper
            //         wrapper.appendChild(img);
            //         wrapper.appendChild(removeButton);

            //         // Append wrapper to preview container
            //         previewContainer.appendChild(wrapper);
            //     };
            //     reader.readAsDataURL(file);
            // });

            // // Function to remove a file from FileList
            // function removeFileFromFileList(fileList, index) {
            //     const dataTransfer = new DataTransfer();
            //     Array.from(fileList).forEach((file, i) => {
            //         if (i !== index) dataTransfer.items.add(file);
            //     });
            //     return dataTransfer.files;
            // }
        });

        document.querySelectorAll('.remove-photo').forEach(btn => {
            btn.addEventListener('click', function() {
                const photoId = this.getAttribute('data-photo-id');
                fetch(`/photos/${photoId}`, {
                        method: 'DELETE',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        }
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            this.parentElement.remove();
                        }
                    })
                    .catch(console.error);
            });
        });
    </script>
    <script>
        $(document).ready(function() {

            $('#franchise_checkbox').change(function() {
                toggleFields();
            });

            // Handle logo preview
            $('#logo').change(function(e) {
                const file = e.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        $('#logoPreview').attr('src', e.target.result).show();
                        $('#logoPreview').parent().addClass('mt-3');
                        $('#logoError').addClass('d-none');
                    }
                    reader.readAsDataURL(file);
                } else {
                    $('#logoPreview').hide();
                    $('#logoPreview').parent().removeClass('mt-3');
                }
            });

            // Handle logo preview
            $('#banner').change(function(e) {
                const file = e.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        $('#bannerPreview').attr('src', e.target.result).show();
                        $('#bannerPreview').parent().addClass('mt-3');
                        $('#bannerError').addClass('d-none');
                    }
                    reader.readAsDataURL(file);
                } else {
                    $('#bannerPreview').hide();
                    $('#bannerPreview').parent().removeClass('mt-3');
                }
            });

            function toggleCitySelect() {
                if (document.getElementById('pan_india').checked) {
                    citySelect.disable();
                    citySelect.clear();
                } else {
                    citySelect.enable();
                }
            }

            toggleCitySelect();

            document.getElementById("pan_india").addEventListener("change", function() {
                toggleCitySelect();
            });

            // Populate the holiday list on page load
            holidays.forEach(date => {
                $('#holidayList').append(`
                    <div class="col-lg-4 col-md-6 mt-2">
                        <div class="d-flex justify-content-between p-2 border rounded holiday-date-bg-color">
                            ${date}
                            <!-- <button type="button" class="btn btn-danger btn-sm remove-holiday" data-date="${date}">Remove</button> -->
                            <span class="remove-holiday cursor-pointer" data-date="${date}">
                                <svg xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-trash"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7l16 0" /><path d="M10 11l0 6" /><path d="M14 11l0 6" /><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" /><path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" /></svg>
                            </span>
                        </div>
                    </div>
                `);
            });

            // Add holiday
            $('#addHolidayBtn').click(function() {
                let holidayDate = $('#holiday_date').val();
                if (holidayDate && !holidays.includes(holidayDate)) {
                    holidays.push(holidayDate);

                    // Append holiday to list
                    $('#holidayList').append(`
                        <div class="col-lg-4 col-md-6 mt-2">
                            <div class="d-flex justify-content-between p-2 border rounded holiday-date-bg-color">
                                ${holidayDate}
                                <!-- <button type="button" class="btn btn-danger btn-sm remove-holiday" data-date="${holidayDate}">Remove</button> -->
                                <span class="remove-holiday cursor-pointer" data-date="${holidayDate}">
                                    <svg xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-trash"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7l16 0" /><path d="M10 11l0 6" /><path d="M14 11l0 6" /><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" /><path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" /></svg>
                                </span>
                            </div>
                        </div>
                    `);

                    updateHolidaysInput();
                    $('#holiday_date').val('');
                } else {
                    showErrorMessage('Please select a valid and unique date.', 5000);
                }
            });

            // Remove holiday
            $(document).on('click', '.remove-holiday', function() {
                let dateToRemove = $(this).data('date');
                holidays = holidays.filter(date => date !== dateToRemove);
                $(this).closest('.col-md-6').remove();
                updateHolidaysInput();
            });

            function updateHolidaysInput() {
                $('#holidaysInput').val(JSON.stringify(holidays));
            }
        });
    </script>
@endsection