@extends('layouts.master')
@section('title', 'Generated Label')
@section('style')
    <style>
        /* Add your CSS styles here */
        .booking-info-container {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }

        .booking-info {
            width: 48%;
            /* Adjust width as needed */
        }

        .booking-info label {
            font-weight: bold;
        }

        .booking-info div {
            margin-top: 5px;
        }

        .checkbox-container {
            margin-top: 20px;
        }

        .payment-gateway-select {
            margin-top: 20px;
        }

        /**** CSS START BY (PY) ****/
        .booking_wrap label,
        .booking_wrap div {
            font-size: 16px;
            color: #212529;
            font-weight: 700;
        }

        .booking_wrap div {
            font-weight: 400;
            margin: 0px 0px 0px 10px !important;
            color: #605858;
        }

        .booking_wrap {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
        }

        .booking-info h2 {
            font-size: 26px;
            font-weight: bold;
            color: #212529;
            margin-bottom: 15px;
        }

        .cancel_btn,
        .generate_btn {
            width: max-content;
            padding: 10px 30px;
        }

        .generate_btn {
            padding: 10px 10px;
        }

        .checkbox-container label,
        .payment-gateway-select label {
            font-size: 14px;
            color: #333;
            font-weight: 600;
        }

        .payment-gateway-select select {
            padding: 5px 10px;
        }

        @media screen and (min-width:320px) and (max-width:991px) {
            .booking_main {
                display: flex;
                flex-direction: column;
            }

            .booking_main .booking_wrap label {
                width: 55%;
            }

            .booking-info h2 {
                font-size: 24px;
            }

            .booking_main .booking-info {
                margin-bottom: 20px;
                width: 100%;
            }
        }

        @media screen and (min-width:576px) and (max-width:767px) {
            .booking-info h2 {
                font-size: 20px;
            }

            .booking_wrap label,
            .booking_wrap div {
                font-size: 14px;
            }

            .booking_wrap {
                margin-bottom: 11px;
            }
        }

        @media screen and (max-width:575px) {
            .booking-info h2 {
                font-size: 20px;
            }

            .booking_wrap label,
            .booking_wrap div {
                font-size: 14px;
            }

            .booking_wrap {
                margin-bottom: 11px;
            }

            .booking_main .booking_wrap label {
                width: 65%;
            }

            .top_wrap {
                display: flex;
                flex-direction: column;
            }
        }

        .hidden {
            display: none
        }

        /**** CSS END BY (PY) ****/
    </style>
@endsection
@section('content')
    <main id="main" class="main">

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

        <section class="section dashboard">
            <form id="quoteForm" class="px-5">
                @csrf
                <input type="text" value="{{ $date }}" name="shipt_to_collection_date" hidden>
                <input type="text" value="{{ $time }}" name="shipt_to_collection_time" hidden>
                <input type="text" value="{{ $presetId }}" name="preset_id" hidden>
                <input type="text" value="{{ $courierName }}" name="courier" hidden>
                <input type="text" value="{{ $courierPrice }}" name="courier_price" hidden>

                <input type="hidden" name="id" value="{{ $bookingtemp->id }}">
                <input type="hidden" name="description" value="{{ $bookingtemp->description }}">
                <input type="hidden" name="email" value="{{ $bookingtemp->email }}">
                <input type="hidden" name="origin_contact_phone" value="{{ $bookingtemp->origin_phone }}">
                <input type="hidden" name="origin_contact_email" value="{{ $bookingtemp->origin_email }}">
                <input type="hidden" name="origin_contact_name" value="{{ $bookingtemp->origin_contact_name }}">
                <input type="hidden" name="origin_name" value="{{ $bookingtemp->origin_name }}">
                <input type="hidden" name="origin_address_1" value="{{ $bookingtemp->origin_address_1 }}">
                <input type="hidden" name="origin_address_2" value="{{ $bookingtemp->origin_address_2 }}">
                <input type="hidden" name="origin_city" value="{{ $bookingtemp->origin_city }}">
                <input type="hidden" name="origin_postal" value="{{ $bookingtemp->origin_postal }}">
                <input type="hidden" name="origin_country" value="{{ $bookingtemp->origin_country }}">
                <input type="hidden" name="ship_to_phone" value="{{ $bookingtemp->destination_phone }}">
                <input type="hidden" name="ship_to_email" value="{{ $bookingtemp->destination_email }}">
                <input type="hidden" name="ship_to_reference" value="{{ $bookingtemp->destination_contact_name }}">
                <input type="hidden" name="ship_to_name" value="{{ $bookingtemp->destination_name }}">
                <input type="hidden" name="ship_to_address_1" value="{{ $bookingtemp->destination_address_1 }}">
                <input type="hidden" name="ship_to_address_2" value="{{ $bookingtemp->destination_address_2 }}">
                <input type="hidden" name="ship_to_city" value="{{ $bookingtemp->destination_city }}">
                <input type="hidden" name="postal" value="{{ $bookingtemp->destination_postal }}">
                <input type="hidden" name="country" value="{{ $bookingtemp->destination_country }}">
                <input type="hidden" name="collection_note" value="{{ $bookingtemp->collection_note }}">
                <input type="hidden" name="delivery_instructions" value="{{ $bookingtemp->delivery_instructions }}">



                <!-- Generated Label -->
                <div id="generatedLabel" className="mt-5" style="display: none;">
                    <div class="card card-primary card-outline">
                        <div class="card-header">
                            <h3 class="card-title">Generated Label</h3>
                        </div>
                        <div class="card-body table-responsive">
                            <a href="#" target="_blank" class="btn btn-outline-primary view-label"> View Label | <i
                                    class="fas fa-download"></i></a>
                        </div>
                    </div>
                    <div class="col-12 d-flex justify-content-between mt-5">
                        <a href="{{ route('quotes') }}"
                            class="cancel_btn btn btn-secondary text-white col-lg-3 col-sm-10 "
                            style="min-width: 140px !important">Go Back</a>

                        {{-- <button id="generate_label" type="button"
                        class="generate_btn btn btn-primary text-white col-lg-3 col-sm-10 ">Generate Label</button> --}}
                    </div>
                </div>
            </form>
        </section>
    </main>

@endsection

@section('script')
    <script>
        $(document).ready(function(e) {
            var formData = new FormData($('#quoteForm')[0]);
            var $button = $(this);


            $.ajax({
                url: '/quotes/quote/generate-label',
                type: 'POST',
                data: formData,
                dataType: 'json',
                processData: false,
                contentType: false,
                beforeSend: function() {
                    // Show loading state
                    $button.html(
                        '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...'
                    );
                    $button.prop('disabled', true);
                },
                complete: function() {
                    // Restore the button state
                    $button.html('Generate Label');
                    $button.prop('disabled', false);
                },
                success: function(response) {
                    removeErrors();

                    console.log(response)
                    if (response) {
                        if (response.status === 400) {
                            var errorMessage = response.responseJSON.message;
                            // Display the error message using toastr or any other method
                            toastr.error(errorMessage);
                            console.log(response.responseJSON.message)
                            return;
                        }
                        toastr.success("Label Generated.")
                        $('.view-label').attr('href', response.uri);
                        $('#generatedLabel').show();
                        $('html, body').animate({
                            scrollTop: $('#generatedLabel').offset().top
                        }, 200);
                    }
                },
                error: function(response) {
                    console.log(response);

                    removeErrors();

                    if (response.status === 422) {
                        var errors = response.responseJSON.error;
                        showErrors(errors);
                    } else {
                        // Extract the error message from the JSON response or responseText
                        var errorMessage = response.responseJSON.error;

                        // Display the error message using toastr or any other method
                        toastr.error(errorMessage);
                        console.log(response.responseJSON.error)
                    }
                }



            });
        });


        function showErrors(errors) {
            removeErrors();

            for (var field in errors) {
                var errorMessage = errors[field][0];
                var fieldName = field;
                if (fieldName === 'country' || fieldName === 'postal' || fieldName.startsWith('ship_to_') || fieldName
                    .startsWith('origin_')) {
                    $('[name="' + fieldName + '"]').addClass('is-invalid');
                    $('[name="' + fieldName + '"]').after('<div class="invalid-feedback">' + errorMessage + '</div>');
                } else {
                    if (Array.isArray(errors[field])) {
                        var fieldArray = field.split('.');
                        var fieldName = fieldArray[0] + '[]';
                        var fieldIndex = fieldArray[1];
                        $('[name="' + fieldName + '"]:eq(' + fieldIndex + ')').addClass('is-invalid');
                        $('[name="' + fieldName + '"]:eq(' + fieldIndex + ')').after('<div class="invalid-feedback">' +
                            errorMessage + '</div>');
                    } else {
                        $('[name="' + field + '"]').addClass('is-invalid');
                        $('[name="' + field + '"]').after('<div class="invalid-feedback">' + errorMessage + '</div>');
                    }
                }
            }
        }

        function removeErrors() {
            $('.is-invalid').removeClass('is-invalid');
            $('.invalid-feedback').remove();
            $('#addressFields .alert').remove();
        }


        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('quoteForm');
            const editBtn = document.getElementById('editBtn');

            editBtn.addEventListener('click', function() {

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