@include('header')
<div class="container-fluid flex-grow-1 container-p-y">
    <h4 class="font-weight-bold py-3 mb-0">Glass Name Report</h4>

    <div class="card mb-4">
        <div class="card-body">
            <div id="alert_message"></div>
            <form id="validation-form" method="post" enctype="multipart/form-data">
                <div class="form-row">
                    <div class="form-group col-md-3">
                        <label class="form-label">Glass Name</label>
                        <input type="text" name="GlassName" id="GlassName" class="form-control"
                            list="glassNameDatalist" autocomplete="off" placeholder="All glass names">
                        <datalist id="glassNameDatalist">
                            @foreach($glassNameList as $name)
                            <option value="{{ $name }}"></option>
                            @endforeach
                        </datalist>
                    </div>
                    <div class="form-group col-md-3">
                        <label class="form-label">From Date</label>
                        <input type="date" name="FromDate" id="FromDate" class="form-control" value="{{ date('Y-m-d') }}"
                            autocomplete="off" required>
                    </div>
                    <div class="form-group col-md-3">
                        <label class="form-label">To Date</label>
                        <input type="date" name="ToDate" id="ToDate" class="form-control" value="{{ date('Y-m-d') }}"
                            autocomplete="off" required>
                    </div>
                    <div class="form-group col-md-2" style="padding-top:20px;">
                        <button type="button" id="filter" class="btn btn-primary btn-finish">Search</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <style>
    table, td, th { border: 1px solid #ddd; text-align: left; }
    table { border-collapse: collapse; width: 100%; }
    th, td { padding: 15px; }
  .glass-count-link { color: #007bff; cursor: pointer; font-weight: 600; text-decoration: underline; }
    #glass-report-page-loader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.45);
        z-index: 10050;
        display: none;
        align-items: center;
        justify-content: center;
    }
    #glass-report-page-loader .glass-report-loader-box {
        background: #fff;
        padding: 24px 36px;
        border-radius: 8px;
        font-weight: 600;
        text-align: center;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    }
    #glassNameDetailTable_wrapper .dtr-control,
    #glassNameDetailTable td.dtr-control,
    #glassNameDetailTable th.dtr-control {
        display: none !important;
        width: 0 !important;
        padding: 0 !important;
        border: none !important;
    }
    </style>

    <div class="row">
        <div class="col-xl-12">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title mb-3">Glass Name Summary</h5>
                    <div class="table-responsive" id="summaryResult"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="glass-report-page-loader" aria-hidden="true">
    <div class="glass-report-loader-box">
        <span class="spinner-border text-primary mb-2" role="status"></span>
        <div>Please Wait...</div>
    </div>
</div>

<div class="modal fade" id="glass-detail-modal" tabindex="-1" role="dialog" aria-labelledby="glassDetailModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-xl" style="max-width: 95%;">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="glass-detail-modal-title">Sale Bill Details</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="table-responsive" id="detailResult"></div>
            </div>
        </div>
    </div>
</div>

@include('footerscript')
@include('excelscript')
<script>
    $(document).ready(function() {
        function showPageLoader() {
            $('#glass-report-page-loader').css('display', 'flex');
        }

        function hidePageLoader() {
            $('#glass-report-page-loader').hide();
        }

        function loadSummary() {
            var FromDate = $('#FromDate').val();
            var ToDate = $('#ToDate').val();
            var GlassName = $('#GlassName').val();

            if (FromDate === '' || ToDate === '') {
                alert('Both dates are required');
                return;
            }

            $.ajax({
                url: "{{ url('viewGlassNameReportSummary') }}",
                method: "POST",
                data: {
                    _token: '{{ csrf_token() }}',
                    FromDate: FromDate,
                    ToDate: ToDate,
                    GlassName: GlassName
                },
                success: function(data) {
                    $('#summaryResult').html(data);
                }
            });
        }

        function destroyGlassDetailTable() {
            if ($.fn.DataTable.isDataTable('#glassNameDetailTable')) {
                $('#glassNameDetailTable').DataTable().destroy();
            }
        }

        function initGlassDetailTable(glassName) {
            destroyGlassDetailTable();
            if (!$('#glassNameDetailTable').length) {
                return;
            }
            $('#glassNameDetailTable').DataTable({
                responsive: false,
                scrollX: true,
                dom: 'Bfrtip',
                pageLength: 100,
                order: [[2, 'desc']],
                columnDefs: [{
                    targets: 0,
                    className: 'text-center',
                    width: '40px'
                }],
                buttons: [{
                    extend: 'excelHtml5',
                    title: 'Glass Name Report - ' + glassName,
                    text: 'Export to Excel'
                }]
            });
        }

        function loadDetails(GlassName) {
            var FromDate = $('#FromDate').val();
            var ToDate = $('#ToDate').val();

            if (FromDate === '' || ToDate === '') {
                alert('Both dates are required');
                return;
            }

            showPageLoader();

            $.ajax({
                url: "{{ url('viewGlassNameReportDetails') }}",
                method: "POST",
                data: {
                    _token: '{{ csrf_token() }}',
                    FromDate: FromDate,
                    ToDate: ToDate,
                    GlassName: GlassName
                },
                success: function(data) {
                    destroyGlassDetailTable();
                    $('#detailResult').html(data);
                    $('#glass-detail-modal-title').text('Sale Bill Details - ' + GlassName);
                    $('#glass-detail-modal').one('shown.bs.modal', function() {
                        initGlassDetailTable(GlassName);
                        hidePageLoader();
                    }).modal('show');
                },
                error: function() {
                    hidePageLoader();
                    alert('Failed to load sale bill details. Please try again.');
                }
            });
        }

        $('#glass-detail-modal').on('hidden.bs.modal', function() {
            destroyGlassDetailTable();
            $('#detailResult').html('');
        });

        $('#filter').click(function() {
            loadSummary();
        });

        $(document).on('click', '.glass-count-link', function() {
            var glassName = $(this).data('glassname');
            loadDetails(glassName);
        });

        loadSummary();
    });
</script>