@extends('layouts.admin')
@section('title', 'Product | Mintavia Admin')

@section('content')
    <style>
        /* 🌟 Modal Header Styling */
        .modal-header {
            background: linear-gradient(45deg, #007bff, #6610f2);
            /* Gradient Header */
            color: white;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            padding: 15px;
        }

        /* 📌 Input Field Styling */
        .form-control {
            border: 2px solid #ced4da;
            border-radius: 8px;
            padding: 12px;
            font-size: 16px;
            transition: all 0.3s ease-in-out;
        }

        .form-control:focus {
            border-color: #007bff;
            box-shadow: 0 0 8px rgba(0, 123, 255, 0.5);
        }

        /* 🎨 "Add" Button Styling */
        #AddMoreFileUrlButton {
            background-color: #28a745;
            border-color: #28a745;
            font-size: 14px;
            padding: 8px 15px;
            border-radius: 6px;
            transition: 0.3s;
        }

        #AddMoreFileUrlButton:hover {
            background-color: #218838;
            transform: scale(1.05);
        }

        /* 🚀 "Save" Button Styling (अब Right में होगा) */
        #AddProductFilesButton {
            background-color: #007bff;
            border-color: #007bff;
            font-size: 16px;
            font-weight: bold;
            padding: 10px 18px;
            border-radius: 6px;
            transition: 0.3s;
            float: right;
            /* Right Align */
        }

        #AddProductFilesButton:hover {
            background-color: #0056b3;
            transform: scale(1.05);
        }

        /* Modal Box Shadow */
        .modal-content {
            border-radius: 12px;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
        }

        /* Modal Body Padding */
        .modal-body {
            padding: 25px;
        }

        /* Row Spacing */
        .row {
            margin-bottom: 15px;
        }

        /* Centering the modal */
        .modal-dialog {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: calc(100% - 3.5rem);
        }

        .dt-buttons {
            display: none;
        }
    </style>
    <div class="row">
        <div class="col-12">
            @if (session('message'))
                <script>
                    window.onload = function() {
                        toastr["{{ session('message.status') }}"]("{{ session('message.message') }}");
                    }
                </script>
            @endif
            <div class="card card-primary">
                <div class="card-header d-flex align-items-center">
                    <h3 class="card-title">Product List (Secondary List)</h3>
                    <div class="ml-auto d-flex">
                        <a href="{{ route('admin.products.generate') }}">
                            <button class="btn btn-sm btn-block btn-flat btn-secondary rounded-0 shadow ">Generate Barcode
                            </button>
                        </a>
                        <a href="{{ route('admin.products.create') }}" class=" ml-2 mr-2">
                            <button class="btn btn-sm btn-block btn-flat btn-light rounded-0 shadow "><i
                                    class="fa fa-plus"></i> </button>
                        </a>
                        <div class="ml-auto">
                            <a href="{{ route('admin.products.index-short') }}">
                                <button class="btn btn-sm btn-flat shadow rounded-0 btn-danger"><i
                                        class="fa fa-arrow-circle-left"></i> Back
                                </button>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <form id="dataTableSearchForm">
                        <div class="row">
                            <input type="hidden" name="product_part_no" class="form-control"
                                value="{{ app('request')->input('product_part_no') }}">
                            <div class="col-2">
                                <input type="text" name="barcode" class="search-query form-control"
                                    placeholder="Search Barcode" />
                            </div>
                            <div class="col-2">
                                <input type="text" name="product_name" class="search-query form-control"
                                    placeholder="Product Name" />
                            </div>
                            <div class="col-2">
                                <input type="text" name="brand" class="search-query form-control"
                                    placeholder="Brand" />
                            </div>
                            <div class="col-3">
                                <input type="text" name="remark" id="remark" class="search-query form-control"
                                    placeholder="Remark, HSN Code, Godown No., Box and Rack No., Unit, Tax %" />
                            </div>

                            <div class="col-3">
                                <input type="text" name="common_filter" id="common_filter"
                                    class="search-query form-control"
                                    placeholder="Search in Specifications or Narrations" />

                            </div>
                        </div>
                    </form>
                    <div class="table-responsive">
                        {!! $dataTable->table() !!}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade bd-example-modal-lg" id="ProductImagesModal" tabindex="-1" role="dialog"
        aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row" id="ViewProductFilesSection">


                    </div>
                </div>

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



    <div class="modal fade bd-example-modal-lg" id="AddProductFilessModal" tabindex="-1" role="dialog"
        aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Add Product Files</h5>
                </div>
                <div class="modal-body">
                    <form id="uploadForm" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" id="product_id" name="product_id" value="">

                        <div id="FormUrlsSection">
                            <div class="row">
                                <div class="col-md-10 mb-3">
                                    <label class="form-label">Enter File URL</label>
                                    <input type="text" class="form-control" name="file_url[]" required>
                                </div>
                                <div class="col-md-2 mb-3 d-flex align-items-end">
                                    <button type="button" id="AddMoreFileUrlButton"
                                        class="btn btn-success w-100">Add</button>
                                </div>
                            </div>
                        </div>

                        <div id="uploadStatus"></div>

                        <div class="row">
                            <div class="col-md-12">
                                <button type="button" id="AddProductFilesButton" class="btn btn-primary">Upload</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>


    </div>
    <div class="modal fade" id="productDetailsModal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Product Details</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <table class="table table-bordered">
                        <tr>
                            <th>Rim Size</th>
                            <td id="rim_size"></td>
                        </tr>
                        <tr>
                            <th>Section Width</th>
                            <td id="section_width"></td>
                        </tr>
                        <tr>
                            <th>Tyre Aspect Ratio</th>
                            <td id="tyre_aspect_ratio"></td>
                        </tr>
                        <tr>
                            <th>Construction Type</th>
                            <td id="construction_type"></td>
                        </tr>
                        <tr>
                            <th>Load Index</th>
                            <td id="load_index"></td>
                        </tr>
                        <tr>
                            <th>Speed Rating</th>
                            <td id="speed_rating"></td>
                        </tr>
                        <tr>
                            <th>Load Capacity</th>
                            <td id="load_capacity"></td>
                        </tr>
                        <tr>
                            <th>Tread Depth</th>
                            <td id="tread_depth"></td>
                        </tr>
                        <tr>
                            <th>Rim Width</th>
                            <td id="rim_width"></td>
                        </tr>
                        <tr>
                            <th>Item Diameter</th>
                            <td id="item_diameter"></td>
                        </tr>
                        <tr>
                            <th>Item Weight</th>
                            <td id="item_weight"></td>
                        </tr>
                        <tr>
                            <th>Battery Warranty</th>
                            <td id="battery_warranty"></td>
                        </tr>
                        <tr>
                            <th>Narration 1</th>
                            <td id="narration_1"></td>
                        </tr>
                        <tr>
                            <th>Narration 2</th>
                            <td id="narration_2"></td>
                        </tr>
                        <tr>
                            <th>Narration 3</th>
                            <td id="narration_3"></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('plugins.Toastr', true)

@section('js')

    {{ $dataTable->scripts() }}
    <script>
        function openProductDetailsModal(rowData) {
            let data = typeof rowData === 'string' ? JSON.parse(rowData) : rowData;

            $("#rim_size").text(data.rim_size ?? '');
            $("#section_width").text(data.section_width ?? '');
            $("#tyre_aspect_ration").text(data.tyre_aspect_ration ?? '');
            $("#construction_type").text(data.construction_type ?? '');
            $("#lode_index").text(data.lode_index ?? '');
            $("#speed_rating").text(data.speed_rating ?? '');
            $("#load_capacity").text(data.load_capacity ?? '');
            $("#tread_depth").text(data.tread_depth ?? '');
            $("#rim_width").text(data.rim_width ?? '');
            $("#item_diameter").text(data.item_diameter ?? '');
            $("#item_weight").text(data.item_weight ?? '');
            $("#battery_warranty").text(data.battery_warranty ?? '');
            $("#narration_1").text(data.narration_1 ?? '');
            $("#narration_2").text(data.narration_2 ?? '');
            $("#narration_3").text(data.narration_3 ?? '');

            $("#productDetailsModal").modal("show");
        }
    </script>
    <script>
        function filterDataTable() {
            if (window.LaravelDataTables && window.LaravelDataTables['product-table']) {
                window.LaravelDataTables['product-table'].draw();
            } else {
                console.error('DataTable not initialized');
            }
        }

        $(document).on('keyup', '.search-query', function(event) {
            filterDataTable(); // DataTable रीफ्रेश करें
        });


        $(document).on('change', '.search-query', function(event) {
            filterDataTable('product-table')
        })
        // Add new file URL field
        $(document).on('click', "#AddMoreFileUrlButton", function(e) {
            e.preventDefault();
            let html = `
        <div class="row">
            <div class="col-md-10 mb-3">
                <input type="text" class="form-control" name="file_url[]" required>
            </div>
            <div class="col-md-2 mb-3 d-flex align-items-end">
                <button type="button" class="btn btn-danger remove-url-field w-100">Remove</button>
            </div>
        </div>`;
            $("#FormUrlsSection").append(html);
        });

        // Remove file URL field
        $(document).on('click', '.remove-url-field', function() {
            $(this).closest('.row').remove();
        });

        // Submit the form via AJAX
        $(document).on('click', '#AddProductFilesButton', function(e) {
            e.preventDefault();

            var form = $("#uploadForm")[0];
            var formData = new FormData(form);

            $.ajax({
                url: "{{ route('upload.file') }}",
                type: "POST",
                data: formData,
                processData: false,
                contentType: false,
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.success) {
                        $("#uploadForm")[0].reset();
                        $("#FormUrlsSection").html(`
                    <div class="row">
                        <div class="col-md-10 mb-3">
                            <label class="form-label">Enter File URL</label>
                            <input type="text" class="form-control" name="file_url[]" required>
                        </div>
                        <div class="col-md-2 mb-3 d-flex align-items-end">
                            <button type="button" id="AddMoreFileUrlButton" class="btn btn-success w-100">Add</button>
                        </div>
                    </div>`);
                        $("#AddProductFilessModal").modal('hide');
                        openImagesModal($('#product_id').val());
                    } else {
                        alert("Upload failed");
                    }
                },
                error: function() {
                    $('#uploadStatus').html(
                        '<div class="alert alert-danger">Error uploading file!</div>');
                }
            });
        });


        // Remove file URL field
        $(document).on('click', '.remove-url-field', function() {
            $(this).closest('.row').remove();
        });
    </script>
@endsection

<script>
    function deleteForm(formId) {
        // Confirmation Popup
        if (confirm("क्या आप वाकई इस प्रोडक्ट को डिलीट करना चाहते हैं?")) {
            // Passkey Input
            let passkey = prompt("कृपया पासकी डालें:");

            // अगर पासकी सही है तो फॉर्म सबमिट करें
            if (passkey === "001100") {
                document.getElementById(formId).submit();
            } else {
                toastr.error("गलत पासकी! डिलीट ऑपरेशन रद्द कर दिया गया।");
            }
        }
    }

    function openImagesModal(product_id) {
        var formData = new FormData();
        formData.append('product_id', product_id);
        $.ajax({
            url: "{{ route('upload.get-product-files') }}", // Laravel route
            type: "POST",
            data: formData,
            processData: false,
            contentType: false,
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}' // CSRF token for security
            },
            beforeSend: function() {
                $('#uploadStatus').html('<div class="alert alert-info">Uploading...</div>');
            },
            success: function(response) {
                $("#ViewProductFilesSection").empty();
                if (response.success) {

                    if (response.product_files) {
                        product_files = response.product_files;
                        product_files.forEach(element => {
                            let html = `<div class="col-md-11">
                            <a href="${element.file}"
                                target="_blank">${element.file}
                            </a>
                        </div>  <div class="col-md-1">
                            <button type="button" onclick="deleteProductFile(${element.id},${element.product_id})" class="btn btn-danger btn-sm" title="Delete">
                                       <i class="fa fa-trash"></i>
                                   </button>
                        </div>`

                            $("#ViewProductFilesSection").append(html);
                        });
                    }

                    $("#ProductImagesModal").modal('show');
                } else {
                    alert("Error ")
                }
            },
            error: function() {
                $('#uploadStatus').html(
                    '<div class="alert alert-danger">Error uploading file!</div>');
            }
        });

    }

    function OpenAddProductFilessModal(product_id) {
        $("#product_id").val(product_id);
        $("#AddProductFilessModal").modal('show');
    }

    function deleteProductFile(product_file_id, product_id) {
        var formData = new FormData();
        formData.append('product_file_id', product_file_id);
        $.ajax({
            url: "{{ route('upload.delete-product-files') }}", // Laravel route
            type: "POST",
            data: formData,
            processData: false,
            contentType: false,
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}' // CSRF token for security
            },
            beforeSend: function() {

            },
            success: function(response) {
                if (response.success) {
                    openImagesModal(product_id)
                } else {
                    alert("Error ")
                }
            },
            error: function() {
                $('#uploadStatus').html(
                    '<div class="alert alert-danger">Error uploading file!</div>');
            }
        });

    }

    $(document).ready(function() {
        $('#product-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('admin.products.index') }}",
                data: function(d) {
                    d.product_part_no = $('input[name="product_part_no"]').val();
                    d.barcode = $('input[name="barcode"]').val();
                    d.product_name = $('input[name="product_name"]').val();
                    d.brand = $('input[name="brand"]').val();
                    d.remark = $('input[name="remark"]').val();
                    d.common_filter = $('input[name="common_filter"]').val(); // ✅ Important
                }
            },
            columns: [{
                    data: 'product_part_no',
                    name: 'product_part_no'
                },
                {
                    data: 'barcode',
                    name: 'barcode'
                },
                {
                    data: 'product_name',
                    name: 'product_name'
                },
                {
                    data: 'brand',
                    name: 'brand'
                },
                {
                    data: 'remark',
                    name: 'remark'
                },
                {
                    data: 'common_filter',
                    name: 'common_filter'
                },
            ]
        });
    });
</script>