@extends('front.layouts-user.master')

@section('title', 'Home Page')

@push('styles')
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

    <style>
        .select2-container {
            width: 100% !important;
        }

        .select2-container .select2-selection--single {
            height: 40px;
            border-radius: 8px;
            border: 2px solid #ddd;
            background-color: #fafafa;
            font-size: 14px;
            font-weight: 500;
            padding: 0 20px;
            transition: all 0.3s ease;
        }

        .select2-container .select2-selection--single:hover {
            border-color: #FF7101;
            box-shadow: 0 0 5px rgba(0, 123, 255, 0.2);
        }

        .select2-container .select2-selection--single:focus {
            border-color: #FF7101;
            box-shadow: 0 0 5px rgba(0, 123, 255, 0.2);
        }

        .select2-container .select2-selection--single .select2-selection__rendered {
            line-height: 36px;
            color: #495057;
        }

        .select2-selection__arrow {
            top: 50% !important;
            transform: translateY(-50%) !important;
            right: 15px !important;
            position: absolute !important;
            height: 20px !important;
            width: 20px !important;
        }

        .select2-container .select2-selection--multiple {
            min-height: 40px;
            border-radius: 8px;
            border: 2px solid #ddd;
            background-color: #fafafa;
            font-size: 14px;
            font-weight: 500;
            padding: 4px 10px;
            transition: all 0.3s ease;
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
        }

        .select2-container .select2-selection--multiple:hover {
            border-color: #FF7101;
            box-shadow: 0 0 5px rgba(0, 123, 255, 0.2);
        }

        .select2-container .select2-selection--multiple:focus {
            border-color: #FF7101;
            box-shadow: 0 0 5px rgba(0, 123, 255, 0.2);
        }

        .select2-container .select2-selection--multiple .select2-selection__choice {
            background-color: #FF7101;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 4px 10px;
            font-size: 13px;
            font-weight: 500;
            margin: 2px;
            transition: background-color 0.3s ease;
        }

        .select2-container .select2-selection--multiple .select2-selection__choice:hover {
            background-color: #FF7101;
        }

        .select2-container .select2-selection--multiple .select2-selection__choice__remove {
            margin-left: 8px;
            color: white;
            cursor: pointer;
        }

        .select2-container .select2-selection--multiple .select2-selection__choice__remove:hover {
            color: #ff5c5c;
        }

        .select2-container--default .select2-results__option {
            padding: 12px 20px;
            font-size: 14px;
            font-weight: 400;
            color: #495057;
            transition: background-color 0.2s ease, color 0.2s ease;
        }

        .select2-container--default .select2-results__option:hover {
            background-color: #FF7101;
            color: white;
            cursor: pointer;
        }

        .select2-container--default .select2-results__option--highlighted {
            background-color: #FF7101;
            color: white;
        }

        .select2-container--default .select2-selection--multiple:focus-within {
            box-shadow: 0 0 8px rgba(0, 123, 255, 0.3);
        }

        .form-check-input:checked {
            background-color: #FF7101;
            border-color: #FF7101;
        }

        .select2-container--default .select2-results__option--highlighted[aria-selected] {
            background-color: #FF7101;
            color: white;
        }
    </style>
@endpush

@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="content-area">
                    <main id="main" class="main-content">
                        <div class="tfcl-dashboard">
                            <h2 class="admin-title mb-3">Add listing</h2>
                            <div class="container mt-4 shipment-section tfcl-add-listing">
                                <form class="border p-4 rounded" id="shipment-form"
                                    action="{{ route('user.shipmentGolfBoatAtvInitialStep') }}" method="POST" novalidate>
                                    @csrf
                                    <input type="hidden" name="category_id" id="category_id">
                                    <input type="hidden" name="sub_category_id" id="sub_category_id">
                                    <div class="mb-3">
                                        <label class="form-label fw-bold">Choose Shipment Information <span
                                                class="text-danger">*</span></label>
                                        <div class="form-check">
                                            <input type="radio" class="form-check-input" name="listingType"
                                                id="notAuction" value="0" checked>
                                            <label class="form-check-label fw-bold" for="notAuction">No, this is not an
                                                auction item or classifieds
                                                listing.</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="radio" class="form-check-input" name="listingType" id="isAuction"
                                                value="1">
                                            <label class="form-check-label fw-bold" for="isAuction">Yes, this item can
                                                be
                                                found at</label>
                                        </div>
                                        <select class="form-select mt-2" aria-label="Select auction platform"
                                            id="auctionPlatform" name="auctionPlatform" disabled>
                                            <option selected disabled>Select</option>
                                            @foreach ($websites as $website)
                                                <option value="{{ $website->id }}">{{ $website->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="mb-3 row">
                                        <div class="col-md-3">
                                            <label for="numberOfItems" class="col-form-label fw-bold">Number of
                                                items:</label>
                                            <div class="col-sm-10">
                                                <input type="number" class="form-control border" id="numberOfItems"
                                                    name="numberOfItems" placeholder="1">
                                            </div>
                                        </div>
                                    </div>
                                        <div id="dynamicFieldsContainer"></div>
                                    <div class="mb-2 row">
                                        <div class="col-md-6">
                                            <label for="pickup-location" class="form-label mt-3 fw-bold">Pickup
                                                location</label>
                                            <select id="pickup" class="form-control select2" name="pickup" required>
                                                <option selected disabled>Select Pickup Location</option>
                                            </select>
                                        </div>
                                        <div class="col-md-6">
                                            <label for="delivery-location" class="form-label mt-3 fw-bold">Delivery
                                                location</label>
                                            <select id="delivery" class="form-control select2" name="delivery" required>
                                                <option selected disabled>Select Delivery Location</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="mb-4">
                                        <h4>Support Service Type</h4>
                                        <div>
                                            @foreach ($allOptions as $key => $label)
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" id="{{ $key }}"
                                                        name="support_service_types[]" value="{{ $key }}" required
                                                        @if (is_array(old('support_service_type')) && in_array($key, old('support_service_type'))) checked @endif>
                                                    <label class="form-check-label"
                                                        for="{{ $key }}">{{ $label }}</label>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>

                                    <div class="mb-3">
                                        <label for="additionalDetails" class="form-label fw-bold">Additional
                                            details:</label>
                                        <textarea class="form-control border" id="additionalDetails" name="additionalDetails" rows="4" maxlength="1200"></textarea>
                                        <small class="form-text text-muted" id="charCount">
                                            You have 1200 characters left.
                                        </small>
                                    </div>

                                    <div class="alert alert-warning border rounded" role="alert">
                                        <strong>IMPORTANT:</strong> Do not include your contact information here. For your
                                        security, your contact
                                        information will be exchanged only after you book a shipment with your Service
                                        Provider.
                                    </div>

                                    <div class="text-end">
                                        <button type="submit" class="btn"
                                            style="background:#FF7101; color:white">Submit</button>
                                    </div>
                                </form>

                              
                            </div>
                            <section class="additional-shipment-section d-none">
                                <div class="container border rounded p-4  my-4"">
                                    <h3 class="mb-4">
                                        <i class="fa fa-info-circle"></i> Complete Shipment Information
                                    </h3>
                                    <form id="additional-shipment-form"
                                        action="{{ route('user.shipmentVehicleSubmit') }}" method="POST">
                                        @csrf
                                        <div class="mb-4">
                                            <h4>Pickup Location & Delivery Dates (Optional)</h4>
                                            <div class="row g-3">
                                                <div class="col-md-6">
                                                    <label for="pickup-date-range" class="form-label">Pickup Date
                                                        Range</label>
                                                    <div class="d-flex gap-2">
                                                        <input type="date" id="pickup-date-start"
                                                            name="pickup_date_start" class="form-control"
                                                            placeholder="Pickup Start Date">
                                                        <input type="date" id="pickup-date-end"
                                                            name="pickup_date_end" class="form-control"
                                                            placeholder="Pickup End Date">
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <label for="delivery-date-range" class="form-label">Delivery Date
                                                        Range</label>
                                                    <div class="d-flex gap-2">
                                                        <input type="date" id="delivery-date-start"
                                                            name="delivery_date_start" class="form-control"
                                                            placeholder="Delivery Start Date">
                                                        <input type="date" id="delivery-date-end"
                                                            name="delivery_date_end" class="form-control"
                                                            placeholder="Delivery End Date">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label fw-bold">Upload pictures:</label>
                                            <div class="input-group">
                                                <input type="file" class="form-control border" id="uploadPictures"
                                                    name="vehicle_photos[]" multiple accept="image/*">
                                            </div>
                                            <div class="mt-3" id="imagePreview"
                                                style="display: flex; gap: 10px; flex-wrap: wrap;"></div>
                                            <small class="form-text text-muted">
                                                <strong>TIP:</strong> Listings with pictures get 63% more quotes than
                                                listings without pictures! You
                                                can
                                                add images now or do it later from your dashboard.
                                            </small>
                                        </div>
                                        <div class="d-flex justify-content-between">
                                            <button type="button" id="back-btn" class="btn btn-outline-secondary">
                                                Back
                                            </button>
                                            <button type="submit" class="btn"
                                                style="background:#FF7101; color:white">
                                                Proceed to final step
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </section>

                            <div class="final-shipment-section d-none">
                                @include('front.shipments.offer.create')
                            </div>
                    </main>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script>
        function initFlatpickr(startId, endId) {
            $("#" + startId).flatpickr({
                mode: "range",
                dateFormat: "Y-m-d",
                allowInput: true,
                onClose: function(selectedDates) {
                    if (selectedDates.length === 2) {
                        let startDate = selectedDates[0];
                        let endDate = new Date(selectedDates[1]);

                        startDate.setDate(startDate.getDate() + 1);
                        endDate.setDate(endDate.getDate() + 1);

                        $("#" + startId).val(startDate.toISOString().split('T')[0]);
                        $("#" + endId).val(endDate.toISOString().split('T')[0]);
                    }
                }

            });

            $("#" + endId).flatpickr({
                dateFormat: "Y-m-d",
                allowInput: true
            });
        }

        initFlatpickr("pickup-date-start", "pickup-date-end");
        initFlatpickr("delivery-date-start", "delivery-date-end");
    </script>

    <script>
        $(document).ready(function() {
            $('#numberOfItems').on('input', function() {
                let numberOfItems = parseInt($(this).val());
                let container = $('#dynamicFieldsContainer');

                container.empty();

                if (!isNaN(numberOfItems) && numberOfItems > 0) {
                    for (let i = 1; i <= numberOfItems; i++) {
                        let shipmentRow = `
                            <div class="row mb-3 vehicle-details">

                                <div class="col-md-5">
                                    <label for="shipmentTitle${i}" class="form-label fw-bold">Shipment Title ${i}:</label>
                                    <input type="text" class="form-control border" id="shipmentTitle${i}" name="shipmentTitle[]" placeholder="e.g., Stand-up Jetski ${i}">
                                    <small class="form-text text-muted">This will become the title of your listing, so be as descriptive as possible.</small>
                                </div>

                                <div class="col-md-5">
                                    <label for="itemDescription${i}" class="form-label fw-bold">Item Description ${i}:</label>
                                    <textarea class="form-control border" id="itemDescription${i}" name="itemDescription[]" rows="3"></textarea>
                                </div>                                 

                                <div class="row mb-3">
                                    <div class="col-md-3">
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" id="operable-${i}"
                                                name="attributes[operable][]" value="1" checked>
                                            <label class="form-check-label" for="operable-${i}">
                                                Operable <span class="d-block text-muted">Run & Drive</span>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" id="convertible-${i}"
                                                name="attributes[convertible][]" value="1">
                                            <label class="form-check-label" for="convertible-${i}">
                                                Convertible <span class="d-block text-muted">Non Convertible</span>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" id="modified-${i}"
                                                name="attributes[modified][]" value="1">
                                            <label class="form-check-label" for="modified-${i}">
                                                Modified <span class="d-block text-muted">Non Modified</span>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" id="carrier-${i}"
                                                name="attributes[carrier][]" value="1" checked>
                                            <label class="form-check-label" for="carrier-${i}">
                                                Carrier <span class="d-block text-muted">Open Carrier</span>
                                            </label>
                                        </div>
                                    </div>
                                </div>

                            </div>

                            <hr>
                        `;
                        container.append(shipmentRow);
                    }
                }
            });
            const maxImages = 5;
            $('#uploadPictures').on('change', function() {
                const files = this.files;
                const $previewContainer = $('#imagePreview');
                $previewContainer.empty();

                if (files.length > maxImages) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Uploading images',
                        text: 'You can upload a maximum of 5 images!'
                    });
                    return;
                }

                $.each(files, function(index, file) {
                    if (file.type.startsWith('image/')) {
                        const reader = new FileReader();
                        reader.onload = function(e) {
                            const $imagePreview = $('<div class="image-preview-box"></div>');
                            const img = $('<img>').attr('src', e.target.result)
                                .css({
                                    width: '100px',
                                    height: '100px',
                                    objectFit: 'cover',
                                    border: '1px solid #ccc',
                                    borderRadius: '5px',
                                });

                            const $removeBtn = $('<button class="remove-btn">X</button>')
                                .click(function() {
                                    $imagePreview
                                        .remove();
                                });

                            $imagePreview.append(img).append($removeBtn);
                            $previewContainer.append($imagePreview);
                        };
                        reader.readAsDataURL(file);
                    }
                });
            });

            const maxItems = 10;
            let fileArray = [];

            const form = $('#shipment-form').validate({
                rules: {
                    numberOfItems: {
                        required: true,
                        number: true,
                        max: maxItems
                    },
                    listingType: {
                        required: true
                    },
                    "shipmentTitle[]": {
                        required: true
                    },
                    "itemDescription[]": {
                        required: true
                    },
                    additionalDetails: {
                        required: true
                    },
                    auctionPlatform: {
                        required: function() {
                            return $("#isAuction").is(":checked");
                        }
                    }
                },
                messages: {
                    numberOfItems: {
                        required: "Please enter the number of items.",
                        number: "Please enter a valid number.",
                        max: "You can upload a maximum of 10 items."
                    },
                    listingType: {
                        required: "Please choose a shipment type."
                    },
                    "shipmentTitle[]": {
                        required: "Please enter a shipment title for each item."
                    },
                    "itemDescription[]": {
                        required: "Please provide a description for each item."
                    },
                    additionalDetails: {
                        required: "Please provide additional details."
                    },
                    auctionPlatform: {
                        required: "Please select an auction platform."
                    }
                },
                errorClass: "is-invalid",
                validClass: "is-valid",
                highlight: function(element) {
                    $(element).addClass('is-invalid').removeClass('is-valid');
                },
                unhighlight: function(element) {
                    $(element).addClass('is-valid').removeClass('is-invalid');
                },
                errorPlacement: function(error, element) {
                    error.addClass('invalid-feedback');
                    if (element.hasClass('select2')) {
                        error.insertAfter(element.next('.select2-container'));
                        element.next('.select2-container').addClass('is-invalid');
                    } else {
                        error.appendTo(element.closest('div'));
                    }
                },
                submitHandler: function(form) {
                    const formData = $(form).serializeArray();

                    const vehicleDetails = [];
                    $('.vehicle-details').each(function(index) {
                        const vehicleData = {};

                        $(this).find('input, textarea').each(function() {
                            const name = $(this).attr('name');
                            let value = $(this).val();

                            if (name) {
                                if ($(this).is(':checkbox')) {
                                    value = $(this).prop('checked') ? $(this).val() :
                                        null;
                                }

                                const cleanedName = name.replace(/\[\d*\]$/,'');

                                if (!vehicleData[cleanedName]) {
                                    vehicleData[cleanedName] = [];
                                }

                                if (value !== null) {
                                    vehicleData[cleanedName].push(value);
                                }
                            }
                        });

                        vehicleDetails.push(vehicleData);
                    });

                    formData.push({
                        name: 'vehicle_details',
                        value: JSON.stringify(vehicleDetails)
                    });


                    $.ajax({
                        url: $(form).attr('action'),
                        method: $(form).attr('method'),
                        data: formData,
                        success: function(response) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Success',
                                text: 'Shipment Initial Step Done',
                            }).then(function() {
                                $(".shipment-section").fadeOut(300, function() {
                                    $(".additional-shipment-section")
                                        .removeClass("d-none")
                                        .fadeIn(500);
                                });
                            });
                        },
                        error: function(xhr, status, error) {
                            try {
                                var errorResponse = JSON.parse(xhr.responseText);
                                var errorMessages = '';

                                if (errorResponse.errors) {
                                    errorMessages = '<ul>';
                                    for (var field in errorResponse.errors) {
                                        errorResponse.errors[field].forEach(function(
                                            message) {
                                            errorMessages += '<li>' + message +
                                                '</li>';
                                        });
                                    }
                                    errorMessages += '</ul>';
                                } else {
                                    errorMessages = '<p>' + (errorResponse.message ||
                                        errorResponse.error ||
                                        'An unknown error occurred.') + '</p>';
                                }

                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error',
                                    html: errorMessages
                                });
                            } catch (e) {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error',
                                    text: 'An error occurred: ' + xhr.responseText
                                });
                            }
                        }
                    });
                    return false;
                }
            });

            $('#uploadPictures').on('change', function() {
                const files = this.files;
                fileArray = Array.from(files);
            });

            $("input[name='listingType']").on('change', function() {
                const listingTypeValue = $("input[name='listingType']:checked").val();
                const $auctionPlatform = $('#auctionPlatform');

                if (listingTypeValue == '0') {
                    $auctionPlatform.prop('disabled', true);
                } else if (listingTypeValue == '1') {
                    $auctionPlatform.prop('disabled', false);
                }
            });

            function getQueryParam(name) {
                const urlParams = new URLSearchParams(window.location.search);
                return urlParams.get(name);
            }

            var selectedCategoryId = getQueryParam('category_id');
            var selectedSubCategoryId = getQueryParam('sub_category_id');

            $('#category_id').val(selectedCategoryId);
            $('#sub_category_id').val(selectedSubCategoryId);


            let finalFormData = new FormData();

            $('#additional-shipment-form').validate({
                submitHandler: function(form) {
                    finalFormData = new FormData(form);

                    fileArray.forEach((file, index) => {
                        finalFormData.append(`vehicle_photos[${index}]`, file);
                    });

                    Swal.fire({
                        icon: 'success',
                        title: 'Success',
                        text: 'Shipment 2nd Step Done',
                    }).then(function() {
                        $(".additional-shipment-section").fadeOut(300, function() {
                            $(".final-shipment-section")
                                .removeClass("d-none")
                                .fadeIn(500);
                        });
                    });
                    return false;
                }
            });


            $("button[type=submit]").on("click", function() {
                $("#actionValue").val($(this).data("value"));
            });

            $('#final-shipment-form').validate({
                submitHandler: function(form) {
                    let offerPrice = $("#offerPrice").val();
                    let action_value = $('#actionValue').val();

                    if (action_value === 'offer' && offerPrice === "") {
                        Swal.fire({
                            icon: "warning",
                            title: "Missing Offer Price",
                            text: "Please enter an offer price before submitting.",
                            confirmButtonColor: "#FF6600",
                        });
                        return;
                    }

                    finalFormData.append("offer_type", action_value);
                    finalFormData.append("offer_price", offerPrice);

                    Swal.fire({
                        title: 'Processing...',
                        text: 'Please wait while we create your shipment.',
                        allowOutsideClick: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });

                    setTimeout(function() {
                        $.ajax({
                            url: $(form).attr('action'),
                            method: $(form).attr('method'),
                            data: finalFormData,
                            processData: false,
                            contentType: false,

                            success: function(response) {
                                setTimeout(function() {
                                    Swal.fire({
                                        icon: 'success',
                                        title: 'Success',
                                        text: 'Shipment created successfully'
                                    }).then(function() {
                                        window.location.href =
                                            @json(route('front.viewShipment'));
                                    });
                                }, 2000);
                            },

                            error: function(xhr) {
                                setTimeout(function() {
                                    Swal.fire({
                                        icon: 'error',
                                        title: 'Error',
                                        text: 'An error occurred: ' +
                                            xhr.responseText
                                    });
                                }, 2000);
                            }
                        });
                    }, 3000);

                    return false;

                }
            });

            const maxLength = 1200;
            const $textarea = $('#additionalDetails');
            const $charCount = $('#charCount');

            $textarea.on('input', function() {
                const remaining = maxLength - $(this).val().length;
                $charCount.text(`You have ${remaining} characters left.`);
            });

            $('#back-btn').click(function() {
                $(".additional-shipment-section").fadeOut(300, function() {
                    $(".shipment-section")
                        .removeClass("d-none")
                        .fadeIn(500);
                });
            });


            function initializeSelect2(elementId) {
                $('#' + elementId).select2({
                    placeholder: 'Select Location',
                    allowClear: true,
                    minimumInputLength: 4,
                    ajax: {
                        url: '{{ route('user.searchLocations') }}',
                        dataType: 'json',
                        delay: 250,
                        data: function(params) {
                            return {
                                q: params.term,
                            };
                        },
                        processResults: function(data) {
                            return {
                                results: data.locations.map(function(location) {
                                    return {
                                        id: location.id,
                                        text: location.city + ', ' + location
                                            .state +
                                            ' - ' +
                                            location.zipcode
                                    };
                                })
                            };
                        },
                        cache: true
                    }
                });
            }

            initializeSelect2('pickup');
            initializeSelect2('delivery');

            $("#OPEN, #ENCLOSED").on("change", function() {
                if ($(this).attr("id") === "OPEN" && $(this).is(":checked")) {
                    $("#ENCLOSED").prop("checked", false);
                }
                if ($(this).attr("id") === "ENCLOSED" && $(this).is(":checked")) {
                    $("#OPEN").prop("checked", false);
                }
            });
        });
    </script>
@endpush