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

@section('content')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">

    <style>
        /* Route Container */
        .route-container {
            position: relative;
            overflow: hidden;
        }

        /* Route Line */
        .route-line {
            position: relative;
            padding-left: 20px;
            /* Space for the animated line */
        }

        .route-line::before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 2px;
            height: 100%;
            background: linear-gradient(to bottom, #0d6efd, #0d6efd 50%, transparent 50%, transparent);
            background-size: 100% 200%;
            animation: routeLine 3s linear infinite;
        }

        /* Route Arrow */
        .route-arrow {
            margin: 0 10px;
            color: #0d6efd;
            animation: bounceArrow 1.5s infinite;
        }

        /* Pickup and Delivery Locations */
        .pickup-location,
        .delivery-location {
            position: relative;
            z-index: 1;
            background: white;
            padding: 0 5px;
        }

        /* Route Line Animation */
        @keyframes routeLine {
            0% {
                background-position: 0 100%;
            }

            100% {
                background-position: 0 -100%;
            }
        }

        /* Bouncing Arrow Animation */
        @keyframes bounceArrow {

            0%,
            100% {
                transform: translateX(0);
            }

            50% {
                transform: translateX(5px);
            }
        }

        :root {
            --primary-orange: #FF912D;
            --dark-orange: #E94E1B;
            --light-orange: #FFF4F0;
            --dark-gray: #24272C;
            --medium-gray: #22262B;
            --glass-orange: rgba(255, 145, 45, 0.1);
            --glass-white: rgba(255, 255, 255, 0.2);
        }

        .page-wrapper {
            min-height: 100vh;
            background: linear-gradient(135deg, #fff9f7 0%, #ffede8 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2rem;
        }

        .main-container {
            background: rgba(255, 255, 255, 0.9);
            border-radius: 2rem;
            box-shadow: 0 32px 64px rgba(255, 107, 53, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid var(--glass-white);
            overflow: hidden;
            width: 1600px;
            margin: auto;
        }

        .hero-header {
            background: linear-gradient(135deg, #e4e4e4, #ff914d);
            padding: 3rem 2rem;
            color: white;
            border-radius: 0 0 2rem 2rem;
            text-align: center;
        }

        .hero-header h1 {
            font-weight: 800;
            letter-spacing: -0.05em;
            margin-bottom: 0.5rem;
            font-size: 2.5rem;
        }

        .profile-img {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            border: 4px solid white;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
        }

        .section-card {
            background: var(--light-orange);
            border: 2px solid var(--primary-orange);
            border-radius: 1.5rem;
            padding: 2.5rem;
            margin: 1.5rem 0;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            backdrop-filter: blur(5px);
        }

        .section-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 12px 24px rgba(255, 107, 53, 0.2);
        }

        .badge-premium {
            background: linear-gradient(45deg, var(--primary-orange), var(--dark-orange));
            color: white;
            padding: 0.75rem 1.5rem;
            border-radius: 2rem;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.9rem;
            box-shadow: 0 4px 8px rgba(233, 78, 27, 0.2);
        }

        .price-display {
            font-size: 3rem;
            font-weight: 800;
            color: var(--primary-orange);
            text-shadow: 0 2px 4px rgba(255, 107, 53, 0.2);
        }

        .divider-orange {
            height: 3px;
            background: linear-gradient(90deg, var(--primary-orange) 0%, #ffd8ce 100%);
            margin: 2rem 0;
            border: none;
        }

        .info-chip {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            background: rgba(255, 255, 255, 0.9);
            padding: 1rem 1.5rem;
            border-radius: 2rem;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            margin: 0.75rem 0;
            backdrop-filter: blur(5px);
            border: 1px solid var(--glass-white);
        }

        .timeline-bar {
            height: 10px;
            background: #ffe5dc;
            border-radius: 5px;
            overflow: hidden;
            position: relative;
        }

        .timeline-progress {
            width: 65%;
            height: 100%;
            background: linear-gradient(90deg, var(--primary-orange), var(--dark-orange));
            border-radius: 5px;
        }

        @media (max-width: 768px) {
            .page-wrapper {
                padding: 1rem;
            }

            .main-container {
                border-radius: 1rem;
            }

            .hero-header {
                padding: 2rem 1rem;
            }

            .hero-header h1 {
                font-size: 2rem;
            }

            .profile-img {
                width: 100px;
                height: 100px;
            }

            .section-card {
                padding: 1.5rem;
            }

            .price-display {
                font-size: 2rem;
            }
        }

        .view-more {
            font-weight: bold;
            color: var(--primary-orange);
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .view-more:hover {
            color: var(--dark-orange);
        }

        .payment-icon {
            max-width: 200px;
            height: 40px;
        }
    </style>

    <div class="page-wrapper">

    </div>
@endsection


<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://www.paypal.com/sdk/js?client-id={{ config('services.paypal.client_id') }}&currency=USD"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
        });
    });
</script>

<script>
    $(document).ready(function() {
        const token = localStorage.getItem("token");
        $('.sidebar-dashboard').hide();
        $('#wrapper-dashboard').css('padding-left', '0px');

        let urlSegments = window.location.pathname.split('/');
        let transporterOfferID = urlSegments[urlSegments.length - 1];

        function fetchShipmentDetails(transporterOfferID) {
            $("#loading").show();
            $.ajax({
                url: '{{ route('user.getOfferedShipment') }}',
                method: "GET",
                data: {
                    id: transporterOfferID
                },
                dataType: "json",
                success: function(response) {
                    $("#loading").hide();
                    if (response) {
                        let data = response;

                        let amount = data.company_fees;
                        let actualFee = data.price;

                        let shipmentHtml = `
                            <div class="main-container">
                                <!-- Hero Header -->
                                <div class="hero-header bg-light py-5">
                                    <div class="container">
                                        <div class="d-flex justify-content-between align-items-center mb-4">
                                            <h1 class="display-5 fw-bold mb-0">Complete Your Booking</h1>
                                            <span class="badge bg-warning text-dark fs-6 p-2">
                                                <i class="fas fa-star me-2"></i> Premium Protection
                                            </span>
                                        </div>
                                        <div class="timeline-bar mt-4">
                                            <div class="timeline-progress"></div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Main Content -->
                                <div class="container-fluid p-4">
                                    <div class="row g-4">
                                        <!-- Left Column: Shipment Details -->
                                        <div class="col-lg-8">
                                            <!-- Shipment Details Card -->
                                            <div class="card mb-4 shadow-sm">
                                                <div class="card-body">
                                                    <h2 class="fw-bold mb-4 text-primary">🚚 Shipment Details</h2>
                                                    <div class="row g-3">
                                                        <!-- Vehicle Identification -->
                                                        <div class="col-md-6">
                                                            <div class="d-flex align-items-center bg-light p-3 rounded">
                                                                <i class="fas fa-tag text-primary fs-4 me-3"></i>
                                                                <div>
                                                                    <div class="fw-bold fs-5">${data.name}</div>
                                                                    <small class="text-muted">Vehicle Identification</small>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <!-- Pickup - Delivery -->
                                                        <div class="col-md-6" >
                                                            <div class="d-flex align-items-center bg-light p-3 rounded">
                                                                <i class="fas fa-route text-primary fs-4 me-3"></i>
                                                                <div>
                                                                    <div  class=" route-line fw-bold fs-5">${data.pickup} → ${data.delivery}</div>
                                                                    <small class="text-muted">Pickup - Delivery</small>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <hr class="my-4">

                                                    <!-- Pickup and Delivery Details -->
                                                    <div class="row g-4">
                                                        <!-- Pickup Details -->
                                                        <div class="col-md-6">
                                                            <div class="card bg-light border-0">
                                                                <div class="card-body">
                                                                    <h5 class="fw-bold text-primary mb-3">
                                                                        <i class="fa-solid fa-truck-pickup me-2"></i> Pickup Details
                                                                    </h5>
                                                                    <hr class="divider-primary">
                                                                    <p class="mb-0">${data.pickup_text}</p>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <!-- Delivery Details -->
                                                        <div class="col-md-6">
                                                            <div class="card bg-light border-0">
                                                                <div class="card-body">
                                                                    <h5 class="fw-bold text-primary mb-3">
                                                                        <i class="fa-solid fa-truck-fast me-2"></i> Delivery Details
                                                                    </h5>
                                                                    <hr class="divider-primary">
                                                                    <p class="mb-0">${data.delivery_text}</p>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- Service Provider Card -->
                                            <div class="card mb-4 shadow-sm">
                                                <div class="card-body">
                                                    <h2 class="fw-bold mb-4 text-primary">🏢 Service Provider</h2>
                                                    <div class="d-flex align-items-center gap-3 mb-4">
                                                        <img src="${data.company_logo}" class="rounded-circle" alt="Provider Logo" style="width: 80px; height: 80px;">
                                                        <div>
                                                            <div class="h4 fw-bold mb-1">${data.company_name}</div>
                                                            <div class="rating small">
                                                                <i class="fas fa-star text-warning"></i> 4.9 (39 Reviews)
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <!-- Secure Payment Alert -->
                                                    <div class="alert alert-primary d-flex align-items-center">
                                                        <i class="fas fa-lock fs-4 me-3"></i>
                                                        <div>
                                                            <h5 class="fw-bold mb-1">Secure Payment</h5>
                                                            <small class="mb-0">All transactions are encrypted</small>
                                                        </div>
                                                    </div>

                                                    <!-- Payment Information -->
                                                    <div class="payment-info mt-4">
                                                        <h5 class="fw-bold text-primary mb-3">
                                                            <i class="fas fa-money-bill-wave text-success me-2"></i> Payment Options
                                                        </h5>
                                                        <p class="ms-4 mb-3">${data.payment_method}</p>

                                                        <h5 class="fw-bold text-primary mb-3">
                                                            <i class="fas fa-check-circle text-success me-2"></i> Payment Accepts
                                                        </h5>
                                                        <p class="ms-4 mb-0">${data.payment_acceptance}</p>
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- Terms & Conditions Card -->
                                            <div class="card mb-4 shadow-sm">
                                                <div class="card-body">
                                                    <h2 class="fw-bold mb-3 text-primary">📜 Terms & Conditions</h2>
                                                    <div class="terms-box small">
                                                        <p class="text-muted mb-2" data-full-text="${response.brokers_terms}">
                                                            ${truncateText(response.brokers_terms)}
                                                            ${response.brokers_terms && response.brokers_terms.length > 50
                                                        ? `<a href="#" class="text-primary text-decoration-none view-more" data-full-text="${response.brokers_terms}"><strong>View More</strong></a>`
                                                        : ''}
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Right Column: Payment Summary -->
                                        <div class="col-lg-4">
                                            <div class="card shadow-sm sticky-top" style="top: 20px;">
                                                <div class="card-body">
                                                    <!-- Order Header -->
                                                    <div class="d-flex justify-content-center align-items-center mb-4">
                                                        <h2 class="fw-bold text-dark me-3">
                                                            <i class="fa-solid fa-file-invoice me-2"></i> Place Your Order
                                                        </h2>
                                                        <img id="secure-payment" src="{{ asset('front/assets/images/misc/secure-checkout-logo.png') }}" alt="Secure Payment" class="img-fluid" style="max-width: 100px;">
                                                    </div>

                                                    <!-- Payment Breakdown -->
                                                    <div class="payment-breakdown">
                                                        <h2 class="fw-bold mb-4 text-primary">💳 Payment Summary</h2>
                                                        <div class="price-display text-center mb-4">
                                                            <span class="display-4 fw-bold">$${new Intl.NumberFormat('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(parseFloat(data.price) + parseFloat(data.company_fees))}</span>
                                                        </div>

                                                        <div class="mb-4">
                                                            <!-- Book Price -->
                                                            <div class="d-flex justify-content-between mb-3">
                                                                <span class="tooltip-container">
                                                                    <span>Book Price</span>
                                                                    <i class="fa-solid fa-circle-question text-primary ms-1" data-bs-toggle="tooltip" title="This is the total price of the booking."></i>
                                                                </span>
                                                                <span class="fw-bold">$${new Intl.NumberFormat('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(parseFloat(data.price) + parseFloat(data.company_fees))}</span>
                                                            </div>

                                                            <!-- Payable to Service Provider -->
                                                            <div class="d-flex justify-content-between mb-3">
                                                                <span class="tooltip-container">
                                                                    <span>Payable to Service Provider</span>
                                                                    <i class="fa-solid fa-circle-question text-primary ms-1" data-bs-toggle="tooltip" title="The amount that will be paid to the service provider."></i>
                                                                </span>
                                                                <span class="fw-bold">
                                                                    $${new Intl.NumberFormat('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(parseFloat(data.price))}
                                                                </span>

                                                            </div>

                                                            <hr class="my-3">

                                                            <!-- Total Due Now -->
                                                            <div class="d-flex justify-content-between fw-bold h5 mb-0">
                                                                <span class="tooltip-container">
                                                                    <span>Total Due Now</span>
                                                                    <i class="fa-solid fa-circle-question text-primary ms-1" data-bs-toggle="tooltip" title="This is the amount due immediately."></i>
                                                                </span>
                                                                <span class="text-primary">
                                                                    $${new Intl.NumberFormat('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(parseFloat(data.company_fees))}
                                                                </span>
                                                            </div>
                                                        </div>

                                                        <!-- Promo Section -->
                                                        <div class="promo-section mb-4">
                                                            <div class="form-check">
                                                                <input class="form-check-input" type="checkbox" id="promoCheck">
                                                                <label class="form-check-label small" for="promoCheck">
                                                                    Love Saving? Get 20% OFF upon booking shipment.<br>
                                                                    <a href="#" class="text-primary text-decoration-underline">See promotion details</a>
                                                                </label>
                                                            </div>
                                                        </div>

                                                        <!-- PayPal Button -->
                                                        <div id="paypal-button"></div>

                                                        <!-- Terms of Service -->
                                                        <p class="text-center small text-muted mb-0 mt-3">
                                                            By continuing, you agree to our<br>
                                                            <a href="#" class="text-primary text-decoration-underline">Terms of Service</a>
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            `

                        $(".page-wrapper").html(shipmentHtml);

                        paypal.Buttons({
                            createOrder: function(data, actions) {
                                return fetch("{{ route('user.payment.create') }}", {
                                        method: 'POST',
                                        headers: {
                                            'Content-Type': 'application/json',
                                            'Authorization': 'Bearer ' + token,
                                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                                        },
                                        credentials: 'include',
                                        body: JSON.stringify({
                                            amount: amount
                                        })
                                    })
                                    .then(res => res.json())
                                    .then(data => data.id);
                            },
                            onApprove: function(data, actions) {
                                return fetch(
                                        "{{ route('user.payment.capture', ['orderId' => '__ORDER_ID__']) }}"
                                        .replace('__ORDER_ID__', data.orderID), {
                                            method: 'POST',
                                            headers: {
                                                'Content-Type': 'application/json',
                                                'Authorization': 'Bearer ' + token,
                                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                                            },
                                            credentials: 'include',
                                            body: JSON.stringify({
                                                amount: amount,
                                                actualFee: actualFee,
                                                transporterOfferID: transporterOfferID
                                            })
                                        })
                                    .then(res => res.json())
                                    .then(details => {
                                        Swal.fire({
                                            title: "Success!",
                                            text: "Your shipment has been booked successfully.",
                                            icon: "success",
                                            confirmButtonText: "OK"
                                        }).then((result) => {
                                            if (result.isConfirmed) {
                                                window.location.href =
                                                    "{{ route('front.viewShipment') }}";
                                            }
                                        });
                                    });

                            }
                        }).render('#paypal-button');
                    } else {
                        $(".page-wrapper").html("<p>No shipment found.</p>");
                    }
                },
                error: function(xhr) {
                    $("#loading").hide();
                    console.error("Error:", xhr.responseText);
                    $(".page-wrapper").html("<p>Error loading shipment details.</p>");
                }
            });
        }

        $(document).on('click', '.view-more', function(e) {
            e.preventDefault();
            const parent = $(this).closest('p');
            const fullText = parent.data('full-text');

            if ($(this).text().trim() === 'view more') {
                parent.html(
                    `${fullText} <a href="#" class="view-more" data-full-text="${fullText}"><strong>view less</strong></a>`
                );
            } else {
                parent.html(
                    `${truncateText(fullText)} <a href="#" class="view-more" data-full-text="${fullText}"><strong>view more</strong></a>`
                );
            }
        });

        function truncateText(text) {
            if (!text || text.length === 0) return "N/A";
            return text.length > 50 ? text.substring(0, 50) + '...' : text;
        }


        fetchShipmentDetails(transporterOfferID);
    });
</script>