@extends('adminlte::page')

@section('title', 'Inventory Management')

@section('content_header')
    <h1><i class="fas fa-boxes"></i> Inventory Management System</h1>
@stop

@section('content')
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Inventory List</h3>
            <div class="card-tools">
                <button type="button" class="btn btn-success btn-sm" onclick="exportExcel()">
                    <i class="fas fa-file-excel"></i> Export Excel
                </button>
                <button type="button" class="btn btn-danger btn-sm" onclick="exportPDF()">
                    <i class="fas fa-file-pdf"></i> Export PDF
                </button>
                <button type="button" class="btn btn-primary btn-sm" onclick="openModal('create')">
                    <i class="fas fa-plus"></i> Add New Item
                </button>
            </div>
        </div>
        <div class="card-body">
            <!-- Filter Section -->
            <div class="row mb-4">
                <div class="col-md-2">
                    <div class="form-group">
                        <label for="searchInput">Search</label>
                        <input type="text" class="form-control" id="searchInput" placeholder="Search...">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group">
                        <label for="dateFromInput">Date From</label>
                        <input type="date" class="form-control" id="dateFromInput">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group">
                        <label for="dateToInput">Date To</label>
                        <input type="date" class="form-control" id="dateToInput">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group">
                        <label for="perPageSelect">Show</label>
                        <select class="form-control" id="perPageSelect">
                            <option value="10">10</option>
                            <option value="50">50</option>
                            <option value="100">100</option>
                            <option value="500">500</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group">
                        <label>&nbsp;</label>
                        <div>
                            <button type="button" class="btn btn-primary btn-block" id="searchBtn">
                                <i class="fas fa-search"></i> Search
                            </button>
                        </div>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group">
                        <label>&nbsp;</label>
                        <div>
                            <button type="button" class="btn btn-secondary btn-block" id="resetBtn">
                                <i class="fas fa-redo"></i> Reset
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Info Display -->
            <div class="row mb-3">
                <div class="col-md-8">
                    <small class="text-muted">Showing <strong id="recordsCount">0</strong> of <strong id="totalRecords">0</strong> records | Page <strong id="currentPage">1</strong> of <strong id="totalPages">1</strong></small>
                </div>
                <div class="col-md-4 text-right">
                    <button type="button" class="btn btn-sm btn-outline-primary" id="prevBtn" disabled>
                        <i class="fas fa-chevron-left"></i> Previous
                    </button>
                    <button type="button" class="btn btn-sm btn-outline-primary" id="nextBtn" disabled>
                        Next <i class="fas fa-chevron-right"></i>
                    </button>
                </div>
            </div>

            <div class="table-responsive">
                <table class="table table-bordered table-hover" id="inventoryTable">
                    <thead class="bg-light">
                        <tr>
                            <th width="50">No.</th>
                            <th>Date Open File</th>
                            <th>Reference Number</th>
                            <th>Nama Penjual</th>
                            <th>Nama Pembeli</th>
                            <th>Alamat</th>
                            <th>Status</th>
                            <th width="100">Action</th>
                        </tr>
                    </thead>
                    <tbody id="inventoryTableBody">
                        <!-- Data akan diload dari AJAX -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="inventoryModal" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <h5 class="modal-title" id="modalTitle">Add New Item</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="inventoryForm">
                    @csrf
                    <input type="hidden" id="inventory_id" name="inventory_id">
                    <input type="hidden" id="form_method" name="_method" value="POST">
                    
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="date_open_file">Date Open File <span class="text-danger">*</span></label>
                                    <input type="date" class="form-control" id="date_open_file" name="date_open_file">
                                    <span class="text-danger error-message" id="error-date_open_file"></span>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="reference_number">Reference Number <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="reference_number" name="reference_number">
                                    <span class="text-danger error-message" id="error-reference_number"></span>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="nama_penjual">Nama Penjual <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="nama_penjual" name="nama_penjual">
                                    <span class="text-danger error-message" id="error-nama_penjual"></span>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="nama_pembeli">Nama Pembeli <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="nama_pembeli" name="nama_pembeli">
                                    <span class="text-danger error-message" id="error-nama_pembeli"></span>
                                </div>
                            </div>

                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="alamat">Alamat <span class="text-danger">*</span></label>
                                    <textarea class="form-control" id="alamat" name="alamat" rows="3"></textarea>
                                    <span class="text-danger error-message" id="error-alamat"></span>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="status">Status <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="status" name="status">
                                    <span class="text-danger error-message" id="error-status"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" id="cancelBtn">
                            <i class="fas fa-times"></i> Cancel
                        </button>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save"></i> Save
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Footer -->
    {{-- <footer>
        <p>Developed By: <strong>Shahril Mohd Isa</strong> | Year: <strong>{{ date('Y') }}</strong></p>
    </footer> --}}
@stop

@section('css')
    <style>
        html, body {
            height: 100%;
        }

        .wrapper {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        .content-wrapper {
            flex: 1;
        }

        footer {
            margin-top: auto;
            border-top: 1px solid #e0e0e0;
            padding: 20px 0;
            text-align: center;
            color: #999;
            font-size: 0.9rem;
        }

        footer p {
            margin: 0;
        }
    </style>
@stop

@section('js')
    <script>
        var currentPage = 1;
        var totalPages = 1;

        $(document).ready(function() {
            loadInventoryData();

            // Search Button Click
            $('#searchBtn').on('click', function() {
                currentPage = 1;
                let filters = {
                    search: $('#searchInput').val(),
                    date_from: $('#dateFromInput').val(),
                    date_to: $('#dateToInput').val(),
                    per_page: $('#perPageSelect').val(),
                    page: currentPage
                };
                loadInventoryData(filters);
            });

            // Per Page Change
            $('#perPageSelect').on('change', function() {
                currentPage = 1;
                let filters = {
                    search: $('#searchInput').val(),
                    date_from: $('#dateFromInput').val(),
                    date_to: $('#dateToInput').val(),
                    per_page: $(this).val(),
                    page: currentPage
                };
                loadInventoryData(filters);
            });

            // Reset Button Click
            $('#resetBtn').on('click', function() {
                $('#searchInput').val('');
                $('#dateFromInput').val('');
                $('#dateToInput').val('');
                $('#perPageSelect').val('10');
                currentPage = 1;
                loadInventoryData();
            });

            // Previous Button Click
            $('#prevBtn').on('click', function() {
                if (currentPage > 1) {
                    currentPage--;
                    let filters = {
                        search: $('#searchInput').val(),
                        date_from: $('#dateFromInput').val(),
                        date_to: $('#dateToInput').val(),
                        per_page: $('#perPageSelect').val(),
                        page: currentPage
                    };
                    loadInventoryData(filters);
                }
            });

            // Next Button Click
            $('#nextBtn').on('click', function() {
                if (currentPage < totalPages) {
                    currentPage++;
                    let filters = {
                        search: $('#searchInput').val(),
                        date_from: $('#dateFromInput').val(),
                        date_to: $('#dateToInput').val(),
                        per_page: $('#perPageSelect').val(),
                        page: currentPage
                    };
                    loadInventoryData(filters);
                }
            });

            // Cancel Button Click - Clear error messages and close modal
            $('#cancelBtn').on('click', function() {
                $('.error-message').text('');

                let currentId = $('#inventory_id').val();

                // Jika create (no ID), reset form juga
                if (!currentId) {
                    $('#inventoryForm')[0].reset();
                    $('#modalTitle').text('Add New Item');
                }
                // Jika edit, hanya clear error messages, data tetap ada

                $('#inventoryModal').modal('hide');
            });

            // Enter key on search input
            $('#searchInput').on('keypress', function(e) {
                if (e.which === 13) {
                    $('#searchBtn').click();
                    return false;
                }
            });
        });

        function loadInventoryData(filters = {}) {
            // Set default per_page if not provided
            if (!filters.per_page) {
                filters.per_page = $('#perPageSelect').val() || 10;
            }
            if (!filters.page) {
                filters.page = 1;
            }

            $.ajax({
                url: "{{ route('inventory.getData') }}",
                type: 'GET',
                data: filters,
                success: function(response) {
                    let tbody = $('#inventoryTableBody');
                    tbody.empty();

                    // Update pagination variables
                    currentPage = response.current_page;
                    totalPages = response.total_pages;

                    // Update records count
                    $('#recordsCount').text(response.data.length);
                    $('#totalRecords').text(response.total);
                    $('#currentPage').text(response.current_page);
                    $('#totalPages').text(response.total_pages);

                    // Update pagination buttons state
                    if (response.current_page <= 1) {
                        $('#prevBtn').prop('disabled', true);
                    } else {
                        $('#prevBtn').prop('disabled', false);
                    }

                    if (response.current_page >= response.total_pages) {
                        $('#nextBtn').prop('disabled', true);
                    } else {
                        $('#nextBtn').prop('disabled', false);
                    }

                    if (response.data.length === 0) {
                        tbody.append(`
                            <tr>
                                <td colspan="8" class="text-center">No data available</td>
                            </tr>
                        `);
                        return;
                    }

                    // Calculate starting number for this page
                    let currentPageNum = parseInt(response.current_page) || 1;
                    let perPageNum = parseInt(response.per_page) || 10;
                    let startNum = ((currentPageNum - 1) * perPageNum) + 1;

                    response.data.forEach(function(item, index) {
                        tbody.append(`
                            <tr>
                                <td class="text-center"><strong>${startNum + index}</strong></td>
                                <td>${item.date_open_file || '-'}</td>
                                <td>${item.reference_number}</td>
                                <td>${item.nama_penjual}</td>
                                <td>${item.nama_pembeli}</td>
                                <td>${item.alamat}</td>
                                <td>${item.status}</td>
                                <td>
                                    <button onclick="editInventory(${item.id})" class="btn btn-sm btn-info" title="Edit">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button onclick="deleteInventory(${item.id})" class="btn btn-sm btn-danger" title="Delete">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </td>
                            </tr>
                        `);
                    });
                },
                error: function(xhr) {
                    console.error('Load error:', xhr);
                    Swal.fire('Error!', 'Failed to load data', 'error');
                }
            });
        }

        function openModal(mode) {
            $('#inventoryModal').modal('show');
            $('.error-message').text('');
            
            if (mode === 'create') {
                $('#modalTitle').text('Add New Item');
                $('#inventoryForm')[0].reset();
                $('#inventory_id').val('');
            }
        }

        function editInventory(id) {
            console.log('Editing ID:', id);
            $.ajax({
                url: "{{ url('inventory') }}/" + id + "/edit",
                type: 'GET',
                success: function(response) {
                    console.log('Edit response:', response);
                    $('#modalTitle').text('Edit Item');
                    $('#inventory_id').val(response.data.id);
                    $('#date_open_file').val(response.data.date_open_file);
                    $('#reference_number').val(response.data.reference_number);
                    $('#nama_penjual').val(response.data.nama_penjual);
                    $('#nama_pembeli').val(response.data.nama_pembeli);
                    $('#alamat').val(response.data.alamat);
                    $('#status').val(response.data.status);
                    $('#inventoryModal').modal('show');
                },
                error: function(xhr) {
                    console.error('Edit error:', xhr);
                    Swal.fire('Error!', 'Failed to load data', 'error');
                }
            });
        }

        $('#inventoryForm').on('submit', function(e) {
            e.preventDefault();
            $('.error-message').text('');

            // Client-side validation
            let errors = {};

            let date_open_file = $('#date_open_file').val();
            if (!date_open_file) {
                errors['date_open_file'] = 'Date Open File field is required';
            }

            let reference_number = $('#reference_number').val().trim();
            if (!reference_number) {
                errors['reference_number'] = 'Reference Number field is required';
            } else if (reference_number.length < 2) {
                errors['reference_number'] = 'Reference Number must be at least 2 characters';
            }

            let nama_penjual = $('#nama_penjual').val().trim();
            if (!nama_penjual) {
                errors['nama_penjual'] = 'Nama Penjual field is required';
            } else if (nama_penjual.length < 2) {
                errors['nama_penjual'] = 'Nama Penjual must be at least 2 characters';
            }

            let nama_pembeli = $('#nama_pembeli').val().trim();
            if (!nama_pembeli) {
                errors['nama_pembeli'] = 'Nama Pembeli field is required';
            } else if (nama_pembeli.length < 2) {
                errors['nama_pembeli'] = 'Nama Pembeli must be at least 2 characters';
            }

            let alamat = $('#alamat').val().trim();
            if (!alamat) {
                errors['alamat'] = 'Alamat field is required';
            } else if (alamat.length < 3) {
                errors['alamat'] = 'Alamat must be at least 3 characters';
            }

            let status = $('#status').val().trim();
            if (!status) {
                errors['status'] = 'Status field is required';
            } else if (status.length < 2) {
                errors['status'] = 'Status must be at least 2 characters';
            }

            // Display validation errors
            if (Object.keys(errors).length > 0) {
                $.each(errors, function(key, value) {
                    $(`#error-${key}`).text(value);
                });
                Swal.fire('Validation Error!', 'Please check all fields', 'warning');
                return;
            }

            let id = $('#inventory_id').val();
            let url = id ? "{{ url('inventory') }}/" + id + "/update" : "{{ route('inventory.store') }}";

            let formData = new FormData(this);
            
            console.log('Submitting to:', url);
            console.log('ID:', id);
            
            $.ajax({
                url: url,
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    console.log('Submit success:', response);
                    if (response.success) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Success!',
                            text: response.message,
                            timer: 1500,
                            showConfirmButton: false
                        });

                        // Close modal after save
                        setTimeout(function() {
                            $('#inventoryModal').modal('hide');
                            $('#inventoryForm')[0].reset();
                            $('.error-message').text('');
                            $('#modalTitle').text('Add New Item');
                        }, 1500);

                        // Reload data
                        loadInventoryData();
                        loadNotificationCount();
                    }
                },
                error: function(xhr) {
                    console.error('Submit error:', xhr);
                    if (xhr.status === 422) {
                        let errors = xhr.responseJSON.errors;
                        $.each(errors, function(key, value) {
                            $(`#error-${key}`).text(value[0]);
                        });
                    } else {
                        Swal.fire('Error!', 'Something went wrong', 'error');
                    }
                }
            });
        });

        function deleteInventory(id) {
            console.log('Delete ID:', id);
            Swal.fire({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "{{ url('inventory') }}/" + id + "/delete",
                        type: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(response) {
                            console.log('Delete success:', response);
                            if (response.success) {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Deleted!',
                                    text: response.message,
                                    timer: 2000,
                                    showConfirmButton: false
                                });
                                loadInventoryData();
                                loadNotificationCount();
                            }
                        },
                        error: function(xhr) {
                            console.error('Delete error:', xhr);
                            Swal.fire('Error!', 'Failed to delete item', 'error');
                        }
                    });
                }
            });
        }

        function loadNotificationCount() {
            $.ajax({
                url: "{{ route('notifications.unread') }}",
                type: 'GET',
                success: function(response) {
                    if (response.count > 0) {
                        $('#notification-menu .badge').text(response.count);
                        $('#notification-count').text(response.count).show();
                    } else {
                        $('#notification-menu .badge').text('0');
                        $('#notification-count').hide();
                    }
                }
            });
        }

        function exportExcel() {
            $.ajax({
                url: "{{ route('inventory.exportExcel') }}",
                type: 'GET',
                xhrFields: {
                    responseType: 'blob'
                },
                success: function(blob) {
                    let url = window.URL.createObjectURL(blob);
                    let a = document.createElement('a');
                    a.href = url;
                    a.download = 'inventory_' + new Date().getTime() + '.xlsx';
                    document.body.appendChild(a);
                    a.click();
                    window.URL.revokeObjectURL(url);
                    document.body.removeChild(a);
                    Swal.fire({
                        icon: 'success',
                        title: 'Success!',
                        text: 'Excel file downloaded successfully',
                        timer: 2000,
                        showConfirmButton: false
                    });
                },
                error: function(xhr) {
                    Swal.fire('Error!', 'Failed to export Excel file', 'error');
                }
            });
        }

        function exportPDF() {
            try {
                window.location.href = "{{ route('inventory.exportPDF') }}";
                setTimeout(function() {
                    Swal.fire({
                        icon: 'success',
                        title: 'Success!',
                        text: 'PDF file downloaded successfully',
                        timer: 2000,
                        showConfirmButton: false
                    });
                }, 500);
            } catch (error) {
                console.error('PDF Export Error:', error);
                Swal.fire('Error!', 'Failed to export PDF file', 'error');
            }
        }
    </script>
@stop