@extends('merchant.templates.layout')

@section('head')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css">
    <style>
        .select2-container { width: 100% !important; }
        .select2-selection { min-height: 34px !important; padding: 3px 6px !important; }

        /* ═══ Image picker ═══ */
        .img-picker {
            position: relative;
            width: 110px;
            height: 110px;
            border-radius: 12px;
            overflow: hidden;
            border: 2px dashed #cbd5e1;
            background: #f8fafc;
            cursor: pointer;
            transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
            flex-shrink: 0;
        }
        .img-picker.small { width: 68px; height: 68px; border-radius: 10px; }
        .img-picker:hover { border-color: #93c5fd; background: #eff6ff; }
        .img-picker.has-image { border-style: solid; border-color: #e2e8f0; background: #fff; }

        .img-picker .picker-input {
            position: absolute; inset: 0;
            width: 100%; height: 100%;
            opacity: 0; cursor: pointer;
            z-index: 5;
        }

        .img-picker .picker-content {
            position: absolute; inset: 0;
            display: flex; align-items: center; justify-content: center;
            z-index: 1; pointer-events: none;
        }
        .img-picker .picker-content img { width: 100%; height: 100%; object-fit: cover; display: block; }

        .img-picker .picker-placeholder {
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            gap: 4px; color: #94a3b8; font-size: 10.5px; text-align: center;
            padding: 6px; line-height: 1.2;
        }
        .img-picker .picker-placeholder i { font-size: 22px; }
        .img-picker.small .picker-placeholder i { font-size: 18px; }
        .img-picker.small .picker-placeholder span { display: none; }

        .img-picker .picker-overlay {
            position: absolute; inset: 0;
            z-index: 6; pointer-events: none;
            display: flex; align-items: flex-end; justify-content: center;
            padding-bottom: 8px; gap: 6px;
            background: linear-gradient(180deg, rgba(15,23,42,0) 40%, rgba(15,23,42,.75) 100%);
            opacity: 0; transition: opacity .15s ease;
        }
        .img-picker.has-image:hover .picker-overlay { opacity: 1; }

        .img-picker .picker-overlay button {
            pointer-events: auto;
            background: rgba(255,255,255,.18);
            border: 1px solid rgba(255,255,255,.35);
            color: #fff;
            width: 28px; height: 28px;
            border-radius: 8px;
            display: flex; align-items: center; justify-content: center;
            font-size: 14px; cursor: pointer;
            transition: background .15s ease;
            backdrop-filter: blur(4px);
        }
        .img-picker.small .picker-overlay button { width: 24px; height: 24px; font-size: 12px; padding: 0; }
        .img-picker .picker-overlay button:hover { background: rgba(255,255,255,.35); }
        .img-picker .picker-overlay button.btn-remove:hover { background: rgba(239,68,68,.85); border-color: rgba(239,68,68,.95); }

        /* ═══ Variant card ═══ */
        .variant-card {
            display: grid;
            grid-template-columns: 68px 1fr 110px 90px 36px;
            gap: 10px;
            align-items: center;
            padding: 10px;
            border: 1px solid #e9edf2;
            border-radius: 12px;
            background: #fbfcfe;
            margin-bottom: 8px;
            transition: border-color .15s ease, background .15s ease;
        }
        .variant-card:hover { border-color: #cbd5e1; background: #f8fafc; }
        .variant-card .remove-variant-row-btn {
            width: 36px; height: 36px;
            display: flex; align-items: center; justify-content: center;
            padding: 0;
        }

        @media (max-width: 640px) {
            .variant-card {
                grid-template-columns: 68px 1fr 36px;
                grid-template-areas:
                    "img name remove"
                    "img price qty";
            }
            .variant-card > .img-picker                   { grid-area: img; }
            .variant-card > input[name$="[variant]"]      { grid-area: name; }
            .variant-card > input[name$="[price]"]        { grid-area: price; }
            .variant-card > input[name$="[quantity]"]     { grid-area: qty; }
            .variant-card > .remove-variant-row-btn       { grid-area: remove; }
        }

        /* ═══ Save button ═══ */
        .btn-save-item {
            display: inline-flex; align-items: center; justify-content: center;
            gap: 6px; min-width: 130px; height: 38px; padding: 0 18px;
            font-size: 13px; font-weight: 600;
        }
        .btn-save-item .icon-slot {
            width: 16px; height: 16px;
            display: inline-flex; align-items: center; justify-content: center;
            position: relative;
        }
        .btn-save-item .icon-slot .spin {
            position: absolute; inset: 0; margin: auto;
            animation: btn-spin .7s linear infinite;
            display: none;
        }
        .btn-save-item.is-loading .icon-slot i { display: none; }
        .btn-save-item.is-loading .icon-slot .spin { display: block; }
        @keyframes btn-spin { to { transform: rotate(360deg); } }
    </style>
@endsection

@section('content')

<div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
    <div>
        <h5 class="mb-1">Draft Order · {{ $order->order_reference }}</h5>
        <p class="text-muted fs-13 mb-0">Add items, then place the order to request a quote.</p>
    </div>
    <div class="d-flex gap-2">
        <a href="{{ route('merchant.orders.index') }}" class="btn btn-sm btn-light">
            <i class="ri-arrow-left-line"></i> Back
        </a>
        <button type="button" class="btn btn-sm btn-success" id="placeOrderBtn"
                data-url="{{ route('merchant.orders.place', $order->id) }}">
            <i class="ri-send-plane-line"></i> Place Order
        </button>
    </div>
</div>

<div class="card mb-3">
    <div class="card-body py-3">
        <div class="row align-items-center">
            <div class="col-md-3">
                <label class="form-label mb-1 fs-12 text-muted text-uppercase">Cargo Company</label>
            </div>
            <div class="col-md-6">
                <select id="cargoCompanySelect" class="form-select form-select-sm">
                    @foreach($cargoCompanies as $cc)
                        <option value="{{ $cc->id }}" {{ (int) $order->cargo_company_id === (int) $cc->id ? 'selected' : '' }}>
                            {{ $cc->company_name ?: $cc->name }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3 text-md-end mt-2 mt-md-0">
                <button type="button" class="btn btn-sm btn-soft-primary" id="saveCargoBtn"
                        data-url="{{ route('merchant.orders.update', $order->id) }}">
                    <i class="ri-save-line"></i> Save
                </button>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center py-3 border-bottom">
        <h5 class="card-title mb-0">Order Items</h5>
        <button type="button" class="btn btn-primary btn-sm" id="addItemBtn">
            <i class="ri-add-line"></i> Add Item
        </button>
    </div>
    <div class="card-body" id="itemsContainer">
        @include('merchant.orders._items_list', ['items' => $order->orderItems])
    </div>
</div>

{{-- ═══ Item Modal ═══ --}}
<div class="modal fade" id="itemModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="itemModalTitle">Add Item</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <form id="itemForm" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="order_id" value="{{ $order->id }}">
                <input type="hidden" name="order_item_id" id="order_item_id">

                <div class="modal-body">
                    <div class="row g-3 mb-4">
                        <div class="col-md-8">
                            <label class="form-label">Item Name <span class="text-danger">*</span></label>
                            <input type="text" name="name" id="item_name" class="form-control" required maxlength="120">
                            <div class="form-text">Give the item a clear name that your team will recognise.</div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Item Image</label>
                            <div id="itemImagePicker"></div>
                        </div>
                    </div>

                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <label class="form-label mb-0">Variants</label>
                        <button type="button" class="btn btn-sm btn-soft-primary" id="addVariantBtn">
                            <i class="ri-add-line"></i> Add Variant
                        </button>
                    </div>

                    <div id="variantsContainer"></div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary btn-save-item" id="saveItemBtn">
                        <span class="icon-slot">
                            <i class="ri-save-line"></i>
                            <svg class="spin" width="16" height="16" viewBox="0 0 24 24" fill="none"
                                 stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
                                <path d="M21 12a9 9 0 1 1-6.2-8.5" />
                            </svg>
                        </span>
                        <span class="btn-label">Save Item</span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('script')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
var ROUTES = {
    addItem:       '{{ route("merchant.orders.add_item") }}',
    updateItem:    '{{ route("merchant.orders.update_item") }}',
    removeItem:    '{{ route("merchant.orders.remove_item") }}',
    removeVariant: '{{ route("merchant.orders.remove_variant") }}',
    itemDetails:   '{{ url("merchant/orders/item") }}',
};
var CSRF = '{{ csrf_token() }}';

$(function () {
    /* ═══ Cargo company save ═══ */
    $('#cargoCompanySelect').select2({ minimumResultsForSearch: -1 });

    $('#saveCargoBtn').on('click', function () {
        $.ajax({
            url: $(this).data('url'), type: 'POST',
            data: { _token: CSRF, cargo_company_id: $('#cargoCompanySelect').val() },
            success: res => toastr.success(res.message || 'Saved'),
            error: xhr => toastr.error(xhr.responseJSON?.message || 'Failed')
        });
    });

    /* ═══ Image picker factory ═══ */
    function pickerHtml(name, removeName, currentUrl, size) {
        const sizeClass = (size === 'small') ? 'small' : '';
        const hasImage  = currentUrl ? 'has-image' : '';
        const content = currentUrl
            ? `<img src="${currentUrl}" alt="">`
            : `<div class="picker-placeholder"><i class="ri-image-add-line"></i><span>Add image</span></div>`;

        return `
            <div class="img-picker ${sizeClass} ${hasImage}">
                <input type="file" class="picker-input" name="${name}" accept="image/*">
                <input type="hidden" class="picker-remove-flag" name="${removeName}" value="0">
                <div class="picker-content">${content}</div>
                <div class="picker-overlay">
                    <button type="button" class="btn-remove" title="Remove image"><i class="ri-delete-bin-line"></i></button>
                </div>
            </div>`;
    }

    $(document).on('change', '.img-picker .picker-input', function () {
        const file = this.files && this.files[0];
        if (!file) return;
        const url = URL.createObjectURL(file);
        const $picker = $(this).closest('.img-picker');
        $picker.addClass('has-image');
        $picker.find('.picker-content').html(`<img src="${url}" alt="">`);
        $picker.find('.picker-remove-flag').val('0');
    });

    $(document).on('click', '.img-picker .btn-remove', function (e) {
        e.stopPropagation();
        e.preventDefault();
        const $picker = $(this).closest('.img-picker');
        const isSmall = $picker.hasClass('small');
        const placeholder = isSmall
            ? `<div class="picker-placeholder"><i class="ri-image-add-line"></i></div>`
            : `<div class="picker-placeholder"><i class="ri-image-add-line"></i><span>Add image</span></div>`;
        $picker.removeClass('has-image');
        $picker.find('.picker-content').html(placeholder);
        $picker.find('.picker-input').val('');
        $picker.find('.picker-remove-flag').val('1');
    });

    /* ═══ Variant card ═══ */
    function newKey() { return 'v_' + Date.now() + '_' + Math.floor(Math.random() * 99999); }

    function variantCard(v, key) {
        v = v || {};
        const picker = pickerHtml(
            `variants[${key}][image]`,
            `variants[${key}][remove_image]`,
            v.image_url || null,
            'small'
        );
        $('#variantsContainer').append(`
            <div class="variant-card" data-key="${key}">
                ${picker}
                <input type="hidden" name="variants[${key}][id]" value="${v.id || ''}">
                <input type="text" class="form-control form-control-sm" placeholder="Variant name"
                       name="variants[${key}][variant]" value="${v.variant || ''}" required maxlength="120">
                <input type="number" step="0.01" min="0.01" class="form-control form-control-sm" placeholder="Price"
                       name="variants[${key}][price]" value="${v.price || ''}" required>
                <input type="number" min="1" max="9999" class="form-control form-control-sm" placeholder="Qty"
                       name="variants[${key}][quantity]" value="${v.quantity || ''}" required>
                <button type="button" class="btn btn-sm btn-soft-danger remove-variant-row-btn" title="Remove variant">
                    <i class="ri-delete-bin-line"></i>
                </button>
            </div>`);
    }

    $('#addVariantBtn').on('click', () => variantCard(null, newKey()));
    $(document).on('click', '.remove-variant-row-btn', function () {
        $(this).closest('.variant-card').remove();
    });

    /* ═══ Item modal ═══ */
    function openItemModal(item) {
        $('#itemForm')[0].reset();
        $('#variantsContainer').empty();
        $('#itemImagePicker').empty();
        $('#order_item_id').val('');

        if (item) {
            $('#itemModalTitle').text('Edit Item');
            $('#order_item_id').val(item.id);
            $('#item_name').val(item.name);

            const itemImg = item.image?.url || null;
            $('#itemImagePicker').html(pickerHtml('image', 'remove_image', itemImg));

            const variants = item.order_item_variants || [];
            if (variants.length === 0) {
                variantCard(null, newKey());
            } else {
                variants.forEach(v => variantCard({
                    id: v.id,
                    variant: v.variant,
                    price: v.price,
                    quantity: v.quantity,
                    image_url: v.image?.url || null,
                }, newKey()));
            }
        } else {
            $('#itemModalTitle').text('Add Item');
            $('#itemImagePicker').html(pickerHtml('image', 'remove_image', null));
            variantCard(null, newKey());
        }

        new bootstrap.Modal(document.getElementById('itemModal')).show();
    }

    $('#addItemBtn').on('click', () => openItemModal(null));

    $(document).on('click', '.edit-item-btn', function () {
        const id = $(this).data('id');
        $.get(ROUTES.itemDetails + '/' + id, function (res) {
            if (res.status === 'success') openItemModal(res.data);
        });
    });

    /* ═══ Save item ═══ */
    $('#itemForm').on('submit', function (e) {
        e.preventDefault();

        if ($('#variantsContainer .variant-card').length === 0) {
            toastr.warning('Add at least one variant.');
            return;
        }

        const $btn = $('#saveItemBtn');
        $btn.addClass('is-loading').prop('disabled', true);
        $btn.find('.btn-label').text('Saving...');

        const fd  = new FormData(this);
        const url = $('#order_item_id').val() ? ROUTES.updateItem : ROUTES.addItem;

        $.ajax({
            url, type: 'POST', data: fd, processData: false, contentType: false,
            success: function (res) {
                toastr.success(res.message || 'Saved');
                bootstrap.Modal.getInstance(document.getElementById('itemModal')).hide();
                setTimeout(() => location.reload(), 400);
            },
            error: function (xhr) {
                toastr.error(xhr.responseJSON?.message || 'Failed to save item.');
                $btn.removeClass('is-loading').prop('disabled', false);
                $btn.find('.btn-label').text('Save Item');
            }
        });
    });

    /* ═══ Remove item / variant ═══ */
    $(document).on('click', '.delete-item-btn', function () {
        const id = $(this).data('id');
        Swal.fire({
            title: 'Remove item?',
            text: 'All variants will be removed as well.',
            icon: 'warning', showCancelButton: true,
            confirmButtonText: 'Yes, remove', confirmButtonColor: '#d33'
        }).then(r => {
            if (!r.isConfirmed) return;
            $.ajax({
                url: ROUTES.removeItem, type: 'POST',
                data: { _token: CSRF, order_item_id: id },
                success: res => { toastr.success(res.message); setTimeout(() => location.reload(), 400); },
                error: xhr => toastr.error(xhr.responseJSON?.message || 'Failed')
            });
        });
    });

    $(document).on('click', '.delete-variant-btn', function () {
        const id = $(this).data('id');
        Swal.fire({
            title: 'Remove variant?', icon: 'warning',
            showCancelButton: true, confirmButtonText: 'Yes, remove', confirmButtonColor: '#d33'
        }).then(r => {
            if (!r.isConfirmed) return;
            $.ajax({
                url: ROUTES.removeVariant, type: 'POST',
                data: { _token: CSRF, order_item_variant_id: id },
                success: res => { toastr.success(res.message); setTimeout(() => location.reload(), 400); },
                error: xhr => toastr.error(xhr.responseJSON?.message || 'Failed')
            });
        });
    });

    /* ═══ Place order ═══ */
    $('#placeOrderBtn').on('click', function () {
        Swal.fire({
            title: 'Place this order?',
            text: "You won't be able to edit items after placing.",
            icon: 'question', showCancelButton: true,
            confirmButtonText: 'Yes, place it', confirmButtonColor: '#10b981'
        }).then(r => {
            if (!r.isConfirmed) return;
            $.ajax({
                url: $('#placeOrderBtn').data('url'), type: 'POST',
                data: { _token: CSRF },
                success: res => {
                    toastr.success(res.message);
                    window.location.href = res.redirect;
                },
                error: xhr => toastr.error(xhr.responseJSON?.message || 'Failed')
            });
        });
    });
});
</script>
@endsection