@extends('layouts.main')
@section('content')
<link href="{{ asset('plugins/select2/select2.min.css') }}" rel="stylesheet" type="text/css" />
<style>
    .search-box {
        background: white;
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 0 10px 1px rgba(0,0,0,.1);
        margin-bottom: 20px;
    }
    
    .product-card {
        background: white;
        border-radius: 5px;
        padding: 15px;
        margin-bottom: 15px;
        box-shadow: 0 0 10px 1px rgba(0,0,0,.1);
        transition: all 0.2s;
    }
    
    .product-card:hover {
        box-shadow: 0 0 15px 1px rgba(0,0,0,.15);
    }
    
    .product-image {
        width: 80px;
        height: 80px;
        object-fit: cover;
        border-radius: 8px;
    }
    
    .location-badge { 

        font-size: 12px;
        background: #779eff;
        color: #2e397d;
        padding: 3px 8px;
        border-radius: 3px;
        font-weight: bold; 
        text-align: center

    }
    
    /* Select2 Custom Styles */
    .select2-container--default .select2-results__option {
        padding: 5px;
        border-bottom: 1px solid #eee;
    }
    
    .product-select-item {
        display: flex;
        align-items: center;
        gap: 6px;
    }
    
    .product-select-image {
        width: 50px;
        height: 50px;
        object-fit: cover;
        border-radius: 3px;
        flex-shrink: 0;
    }
    
    .product-select-info {
        flex-grow: 1;
    }
    
    .product-select-name { 
        font-weight: bold;
        font-size: 10pt;
        margin-bottom: 3px;
        color: black;
    }
    
    .product-select-details {
        font-size: 12px;
        color: #2769c1;
    }
    
    .product-select-qty {
        font-size: 12px;
        background: #e8f5e9;
        color: #2e7d32;
        padding: 3px 8px;
        border-radius: 3px;
        font-weight: bold; 
        text-align: center
    }
    
    .select2-container {
        width: 100% !important;
    }
    
    .select2-selection {
        min-height: 45px !important;
        padding: 5px !important;
    }
    
    @media (max-width: 768px) {
        .product-card {
            padding: 10px;
        }
        
        .product-image {
            width: 60px;
            height: 60px;
        }
        
        .search-box {
            padding: 15px;
        }
        
        .product-select-image {
            width: 40px;
            height: 40px;
        }
    }
    .select2-container .select2-selection--single .select2-selection__rendered{
        height: 35px;
        padding: 3px;
    }
    .select2-container--default .select2-search--dropdown .select2-search__field{
        padding: 5px;
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow{
        left: 7px;
        right: auto;
    }
    
    /* Modal Styles */
    .modal-lg {
        max-width: 700px;
    }
    
    .modal-dialog-scrollable .modal-body {
        max-height: calc(100vh - 120px);
        overflow-y: auto;
    }
    
    @media (max-width: 768px) {
        .modal-lg {
            max-width: 95%;
            margin: 10px auto;
        }
    }
</style>

<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center p-1 px-3">
                    <h6 class="mb-0">گەڕان بۆ کاڵا</h6>
                    <a href="{{ url('mobile/locations') }}" class="btn btn-secondary btn-sm">
                        <i class="las la-list"></i> لیستی شوێنەکان
                    </a>
                </div>
                <div class="card-body p-0">
                    <div class="search-box p-2">
                        <div class="form-group">
                          
                            <select id="productSearch" class="form-control" style="width: 100%;" >
                                <option value="">کاڵایەک هەڵبژێرە یان بگەڕێ...</option>
                            </select>
                        </div>
                    </div>

                    <div id="noSelection" class="text-center py-5">
                        <i class="las la-search" style="font-size: 64px; color: #ccc;"></i>
                        <h5 class="mt-3 text-muted">کاڵایەک هەڵبژێرە بۆ دیاریکردنی شوێن</h5>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Location Modal -->
<div class="modal fade" id="locationModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title">دیاریکردنی شوێنی کاڵا</h6>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body" id="modalContent">
                <div class="text-center py-5">
                    <i class="las la-spinner la-spin" style="font-size: 35px;"></i>
                    <p>تکایە چاوەڕێبە...</p>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="{{ asset('plugins/select2/select2.min.js') }}"></script>
<script>
$(document).ready(function() {
    $('#productSearch').select2({
        ajax: {
            url: '{{ url("mobile/locations/api/search-ajax") }}',
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    q: params.term
                };
            },
            processResults: function (data) {
                return {
                    results: data.results
                };
            },
            cache: true
        },
        placeholder: 'ناو یان کۆدی کاڵا بنووسە...',
        minimumInputLength: 1,
        templateResult: formatProduct,
        templateSelection: formatProductSelection,
        escapeMarkup: function(markup) { return markup; }
    });

    // When a product is selected
    $('#productSearch').on('select2:select', function (e) {
        var data = e.params.data;
        loadProductModal(data.id);
    });

    // Load product modal with AJAX
    function loadProductModal(productId) {
        $('#locationModal').modal('show');
        $('#modalContent').html('<div class="text-center py-5"><i class="las la-spinner la-spin" style="font-size: 48px;"></i><p>تکایە چاوەڕێبە...</p></div>');
        
        $.ajax({
            url: '{{ url("mobile/locations/product") }}/' + productId,
            type: 'GET',
            success: function(response) {
                $('#modalContent').html(response);
            },
            error: function() {
                $('#modalContent').html('<div class="alert alert-danger">هەڵەیەک ڕوویدا. تکایە دووبارە هەوڵبدەوە.</div>');
            }
        });
    }

    // Handle form submission via AJAX
    $(document).on('submit', '#locationForm', function(e) {
        e.preventDefault();
        
        var formData = $(this).serialize();
        var productId = $('input[name="product_id"]').val();
        
        $.ajax({
            url: '{{ url("mobile/locations/store") }}',
            type: 'POST',
            data: formData,
            success: function(response) {
                // Reload modal content
                loadProductModal(productId);
                // Show success message
                showAlert('success', 'شوێنەکە بەسەرکەوتوویی زیادکرا');
            },
            error: function(xhr) {
                var errors = xhr.responseJSON?.errors;
                if (errors) {
                    var errorMsg = '';
                    $.each(errors, function(key, value) {
                        errorMsg += value[0] + '<br>';
                    });
                    showAlert('danger', errorMsg);
                } else {
                    showAlert('danger', 'هەڵەیەک ڕوویدا');
                }
            }
        });
    });

    // Handle delete via AJAX
    $(document).on('submit', '.delete-location-form', function(e) {
        e.preventDefault();
        
        if (!confirm('دڵنیایت لە سڕینەوەی ئەم شوێنە؟')) {
            return false;
        }
        
        var url = $(this).attr('action');
        var productId = $('input[name="product_id"]').val();
        
        $.ajax({
            url: url,
            type: 'POST',
            data: $(this).serialize(),
            success: function(response) {
                loadProductModal(productId);
                showAlert('success', 'شوێنەکە سڕایەوە');
            },
            error: function() {
                showAlert('danger', 'هەڵەیەک ڕوویدا');
            }
        });
    });
    
    // Show alert in modal
    function showAlert(type, message) {
        var alertHtml = '<div class="alert alert-' + type + ' alert-dismissible fade show" role="alert">' +
                        message +
                        '<button type="button" class="close" data-dismiss="alert">&times;</button>' +
                        '</div>';
        $('#modalContent').prepend(alertHtml);
        
        // Auto dismiss after 3 seconds
        setTimeout(function() {
            $('#modalContent .alert').fadeOut('slow', function() {
                $(this).remove();
            });
        }, 3000);
    }

    // Format search results
    function formatProduct(product) {
        if (product.loading) {
            return 'دەگەڕێت...';
        }

        var imageHtml = '';
        if (product.image) {
            imageHtml = '<img src="https://www.dos-shop.com/' + product.image + '" class="product-select-image" />';
        } else {
            imageHtml = '<div class="product-select-image bg-light d-flex align-items-center justify-content-center">' +
                       '<i class="las la-box text-white" style="font-size: 20px;"></i></div>';
        }

        var detailsHtml = '';
        if (product.barcode || product.code) {
            detailsHtml = '<div class="product-select-details">';
            if (product.barcode) {
                detailsHtml += '<span class="mr-2"><i class="las la-barcode"></i> ' + product.barcode + '</span>';
            }
            if (product.code) {
                detailsHtml += '<span><i class="las la-tag"></i> ' + product.code + '</span>';
            }
            detailsHtml += '</div>';
        }

        var qtyBadge = '';
        if (product.qty !== undefined) {
                qtyBadge = '<div class="product-select-qty">' + product.qty +' دانە </div>';
        }

        var locationBadge = '';
        if (product.locations_count > 0) {
            locationBadge = '<span class="badge badge-primary ml-2 mt-1"  >' +
                    product.locations_count + ' شوێن' +
                          '</span>';
        }

        var markup = 
            '<div class="product-select-item"> <div>' +
                qtyBadge + ' '
                +locationBadge+'</div>' +
                '<div class="product-select-info">' +
                    '<div class="product-select-name">' + product.name +'</div>' +
                    detailsHtml +
                '</div>' +
                 imageHtml+
            '</div>';

        return markup;
    }

    // Format selected item
    function formatProductSelection(product) {
        return product.name || product.text;
    }
});
</script>
@endsection