@extends('layout')
@section('content')
    <div class="my-4">
        <div class="container">
            @if (session('error'))
                <div class="alert alert-danger" role="alert">
                    {{ session('error') }}
                </div>
            @endif
            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <div class="row">
                <div class="col-lg-7 mb-6 mb-md-0">
                    <div class="d-flex flex-column theme-border-radius theme-bg-white theme-box-shadow mb-4">
                        <div class="d-flex justify-content-between p-3 border-bottom">
                            <span class="fs-4 fw-bold">@translate('orders', 'shipping_title')</span>
                        </div>
                        <div class="d-flex flex-column justify-content-between p-3">
                            <form id="checkoutForm" action="@localeUrl('checkout.pay')" method="post">
                                @csrf
                                @for ($i = 0; $i < count($currentUser->cartItems); $i++)
                                    <input type="hidden" name="cartItem[{{ $i }}][id]"
                                        value="{{ $currentUser->cartItems[$i]->id }}">
                                    <input type="hidden" name="cartItem[{{ $i }}][count]"
                                        value="{{ $currentUser->cartItems[$i]->count }}">
                                @endfor

                                <div class="mb-3">
                                    <label class="form-label fs-5 fw-bold">@translate('orders', 'choose_address')</label>
                                    @forelse ($currentUser->addreses as $address)
                                        <div class="border mb-3 rounded-md">
                                            <div class="row">
                                                <div class="col-12 col-lg-6">
                                                    <div class="d-flex flex-column p-4">
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="radio" name="address"
                                                                value="{{ $address->id }}" @checked(old('address', $address->primary ? $address->id : -1) == $address->id)>
                                                            <label class="form-check-label">
                                                                <span
                                                                    class="small fw-bold text-uppercase theme-text-primary">{{ [@translateE('profilePage', 'manage_address_is_home'), @translateE('profilePage', 'manage_address_is_work')][
                                                                        $address->type
                                                                    ] }}{{ ['', ' | ' . @translateE('profilePage', 'manage_address_is_default')][$address->primary] }}</span>
                                                            </label>
                                                        </div>
                                                        <span class="small fw-bold mt-3">{{ $address->name }}</span>
                                                        <span
                                                            class="small fw-bold my-3">{{ substr($address->phone_number, 0, 2) . str_repeat('*', strlen($address->phone_number) - 5) . substr($address->phone_number, strlen($address->phone_number) - 3) }}</span>
                                                        <span class="small fw-normal">{{ $address->street }},
                                                            {{ $address->city }}, {{ $address->state }},
                                                            {{ $address->zipcode }}, {{ $address->country }}</span>
                                                    </div>
                                                    <div class="d-flex p-4 font-small">
                                                        <a href="@localeUrl('account.address.edit', ['editId' => $address->id])">@translate('profilePage', 'manage_address_edit')</a>
                                                        <a href="@localeUrl('account.address.delete', ['editId' => $address->id])" class="ms-3">@translate('profilePage', 'manage_address_remove')</a>
                                                        @if ($address->primary == 0)
                                                            <a href="@localeUrl('account.address.default', ['editId' => $address->id])" class="ms-3">@translate('profilePage', 'manage_address_set_default')</a>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @empty
                                        <p><a href="@localeUrl('account.address')">@translate('orders', 'no_address')</a></p>
                                    @endforelse
                                    @error('address')
                                        <div class="text-danger small">{{ $message }}</div>
                                    @enderror
                                    <a href="@localeUrl('account.address')" class="pt-3">@translate('profilePage', 'manage_address_title')</a>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label fs-5 fw-bold">@translate('orders', 'choose_dpd')</label>
                                    <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                                        data-bs-target="#parcelMachineModal">
                                        @translate('orders', 'choose_machine')
                                    </button>
                                    <input type="hidden" name="dpd_parcel_machine_id" id="dpd_parcel_machine_id"
                                        value="{{ old('dpd_parcel_machine_id') }}">
                                    <div id="selectedParcelMachine" class="mt-2 text-muted">
                                        @if (old('dpd_parcel_machine_id'))
                                            @php
                                                $selectedMachine = array_filter(
                                                    $parcelMachines,
                                                    fn($m) => $m['id'] === old('dpd_parcel_machine_id'),
                                                );
                                                $selectedMachine = reset($selectedMachine);
                                            @endphp
                                            @if ($selectedMachine)
                                                @translate('orders', 'chosen') {{ $selectedMachine['name'] }}
                                                ({{ $selectedMachine['address']['street'] }},
                                                {{ $selectedMachine['address']['city'] }})
                                            @else
                                                @translate('orders', 'no_machine')
                                            @endif
                                        @else
                                            @translate('orders', 'no_machine')
                                        @endif
                                    </div>
                                    @error('dpd_parcel_machine_id')
                                        <div class="text-danger small">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-check mb-3">
                                    <input class="form-check-input" type="checkbox" id="privacyPolicyCheckbox">
                                    <label class="form-check-label" for="privacyPolicyCheckbox">
                                        <a href="@localeUrl('privacy-policy')">@translate('cartModal', 'i_agree_with')</a>
                                    </label>
                                </div>

                                <div class="row mt-4">
                                    <div class="col">
                                        <div class="d-flex justify-content-center custom-button">
                                            <button type="submit" id="placeOrderBtn"
                                                class="d-flex justify-content-center align-items-center custom-btn-primary font-small button-effect px-4"
                                                disabled>
                                                @translate('cartModal', 'cart_place_order')
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-lg-5">
                    <div class="d-flex flex-column theme-border-radius theme-bg-white theme-box-shadow mb-4">
                        <div class="d-flex justify-content-between p-3 border-bottom">
                            <span class="fs-4 fw-bold">@translate('cartModal', 'cart_product_summary_title')</span>
                        </div>
                        <div class="p-3">
                            @foreach ($currentUser->cartItems as $cartItem)
                                <div class="border-bottom pt-2">
                                    <div class="row">
                                        <div class="col-12 col-md-6 col-lg-8 font-small">
                                            <p class="mb-2 text">{{ $cartItem->vehiclePart->name }}</p>
                                            <p class="mb-2 theme-text-accent-one">{{ $cartItem->count }} x
                                                {{ $cartItem->vehiclePart->price }}
                                            </p>
                                        </div>
                                        <div class="col-12 col-md-6 col-lg-4 font-small">
                                            <div class="d-flex justify-content-end align-items-end">
                                                <div class="product-price mb-3 fw-bold">
                                                    <i class="bi bi-currency-euro"></i><span
                                                        class="ms-1">{{ $cartItem->count * $cartItem->vehiclePart->price }}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <div class="d-flex justify-content-between p-3 border-bottom">
                            <span class="fs-4 fw-bold">@translate('cartModal', 'cart_summary_title')</span>
                        </div>
                        <div class="p-3">
                            @foreach ($charges as $charge)
                                <div class="border-bottom pt-2">
                                    <div class="row">
                                        <div class="col-12 col-md-6 col-lg-8 font-small">
                                            <p class="mb-2 @if ($charge[1] < 0) text-success @endif">
                                                {{ $charge[0] }}</p>
                                        </div>
                                        <div class="col-12 col-md-6 col-lg-4 font-small">
                                            <div class="d-flex justify-content-end align-items-end">
                                                <div
                                                    class="product-price mb-2 @if ($charge[1] < 0) text-success @endif">
                                                    @if ($charge[1] < 0)
                                                        -
                                                    @endif
                                                    <i class="bi bi-currency-euro"></i><span
                                                        class="ms-1">{{ number_format(abs($charge[1]), 2) }}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                            <div class="pt-2">
                                <div class="row">
                                    <div class="col-12 col-md-6 col-lg-8">
                                        <p class="mb-2 fw-bold">@translate('cartModal', 'cart_total_sum')</p>
                                    </div>
                                    <div class="col-12 col-md-6 col-lg-4">
                                        <div class="d-flex justify-content-end align-items-end">
                                            <div class="product-price mb-2 fw-bold">
                                                <i class="bi bi-currency-euro"></i><span
                                                    class="ms-1">{{ number_format($finalPrice, 2) }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="parcelMachineModal" tabindex="-1" aria-labelledby="parcelMachineModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header bg-primary text-black">
                        <h5 class="modal-title" id="parcelMachineModalLabel">
                            @translate('orders', 'choose_dpd')
                        </h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                    </div>
                    <div class="modal-body p-4">
                        <div class="mb-3">
                            <p class="text-muted">@translate('orders', 'choose_machine_info')</p>
                            <input type="text" id="parcelMachineSearch" class="form-control shadow-sm"
                                placeholder="Meklēt paku automātu...">
                        </div>
                        <div id="parcelMachineMap" class="shadow-sm rounded" style="height: 400px;"></div>
                        <div id="parcelMachineList" class="mt-3 shadow-sm rounded"
                            style="max-height: 200px; overflow-y: auto;"></div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                            @translate('orders', 'close')
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
        <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>

        <style>
            .leaflet-popup-content {
                padding: 10px;
                font-family: Arial, sans-serif;
                background-color: white;
                border-radius: 4px;
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            }

            .list-group-item-action {
                transition: background-color 0.2s;
                cursor: pointer;
            }

            .list-group-item-action:hover {
                background-color: #f8f9fa;
            }

            #parcelMachineSearch {
                border-radius: 20px;
                padding: 10px 20px;
            }

            #parcelMachineMap {
                border-radius: 8px;
            }

            #parcelMachineList {
                border: 1px solid #dee2e6;
                border-radius: 8px;
            }
        </style>

        <script>
            const parcelMachines = @json($parcelMachines);

            const dpdIcon = L.icon({
                iconUrl: '{{ asset('images/dpd-logo.png') }}',
                iconSize: [32, 32],
                iconAnchor: [16, 32],
                popupAnchor: [0, -32]
            });

            let map = null;
            let markers = [];

            function initializeMap() {
                if (map !== null) {
                    map.remove();
                }

                const rigaLat = 56.9496;
                const rigaLng = 24.1052;
                const defaultZoom = 10;

                map = L.map('parcelMachineMap').setView([rigaLat, rigaLng], defaultZoom);

                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                }).addTo(map);

                markers = [];
                parcelMachines.forEach(machine => {
                    const marker = L.marker([machine.address.latLong[0], machine.address.latLong[1]], {
                            icon: dpdIcon
                        })
                        .addTo(map)
                        .bindPopup(`<b>${machine.name}</b><br>${machine.address.street}, ${machine.address.city}`)
                        .on('click', () => selectParcelMachine(machine.id, machine.name));
                    markers.push({
                        id: machine.id,
                        marker: marker
                    });
                });

                map.invalidateSize();
            }


            const searchInput = document.getElementById('parcelMachineSearch');
            searchInput.addEventListener('input', () => {
                const query = searchInput.value.toLowerCase();
                const filteredMachines = parcelMachines.filter(machine =>
                    machine.name.toLowerCase().includes(query) ||
                    machine.address.street.toLowerCase().includes(query) ||
                    machine.address.city.toLowerCase().includes(query)
                );
                updateMapAndList(filteredMachines, query);
            });

            function updateMapAndList(filteredMachines, query) {
                markers.forEach(m => {
                    if (filteredMachines.some(fm => fm.id === m.id)) {
                        m.marker.addTo(map);
                    } else {
                        map.removeLayer(m.marker);
                    }
                });

                const listContainer = document.getElementById('parcelMachineList');
                listContainer.innerHTML = '';
                if (filteredMachines.length === 0 && query !== '') {
                    listContainer.innerHTML = '<p class="p-2 text-muted">Nav atrasts paku automāts</p>';
                } else {
                    filteredMachines.forEach(machine => {
                        const item = document.createElement('div');
                        item.className = 'list-group-item list-group-item-action';
                        item.textContent = `${machine.name} (${machine.address.street}, ${machine.address.city})`;
                        item.addEventListener('click', () => selectParcelMachine(machine.id, machine.name));
                        listContainer.appendChild(item);
                    });
                }

                if (filteredMachines.length > 0) {
                    const bounds = L.latLngBounds(filteredMachines.map(m => [m.address.latLong[0], m.address.latLong[1]]));
                    map.fitBounds(bounds, {
                        padding: [50, 50]
                    });
                } else if (query === '') {
                    map.setView([56.9496, 24.1052], 13);
                }
            }

            function selectParcelMachine(id, name) {
                document.getElementById('dpd_parcel_machine_id').value = id;
                const selectedMachine = parcelMachines.find(m => m.id === id);
                if (selectedMachine) {
                    document.getElementById('selectedParcelMachine').textContent =
                        `Izvēlēts: ${name} (${selectedMachine.address.street}, ${selectedMachine.address.city})`;
                }
                const modal = bootstrap.Modal.getInstance(document.getElementById('parcelMachineModal'));
                modal.hide();
            }

            const parcelMachineModal = document.getElementById('parcelMachineModal');
            parcelMachineModal.addEventListener('shown.bs.modal', function() {
                initializeMap();
            });

            const oldId = '{{ old('dpd_parcel_machine_id') }}';
            if (oldId) {
                const selectedMachine = parcelMachines.find(m => m.id === oldId);
                if (selectedMachine) {
                    document.getElementById('selectedParcelMachine').textContent =
                        `Izvēlēts: ${selectedMachine.name} (${selectedMachine.address.street}, ${selectedMachine.address.city})`;
                }
            }

            const privacyPolicyCheckbox = document.getElementById('privacyPolicyCheckbox');
            const placeOrderBtn = document.getElementById('placeOrderBtn');

            placeOrderBtn.disabled = !privacyPolicyCheckbox.checked;

            privacyPolicyCheckbox.addEventListener('change', function() {
                placeOrderBtn.disabled = !this.checked;
            });
        </script>
    @endsection