@extends('admin.layouts.app')

@section('content')
    <style>
        .table-custom thead tr:first-child th:first-child,
        .table-custom thead tr:first-child th:nth-child(2) {
            border: none !important;
            background: transparent !important;
        }
    </style>

    <div class="page-header">
        <div class="page-title">
            <h4>Batch Costing Report</h4>
            <ul class="breadcrumb">
                <li class="breadcrumb-item active">Store</li>
                <li class="breadcrumb-item active">Batch Costing Report</li>
            </ul>
        </div>
        <div class="text-right">
            <button class="btn btn-primary" onclick="printWithTimestamp()">
                Print Report
            </button>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <div class="row">
                <div class="col-md mb-3">
                    <label for="batch_id">Batch <span class="text-danger">*</span></label>
                    <select id="batch_id" class="form-control js-example-basic-single select2">
                        <option value="">Select Batch</option>
                        @foreach ($batches as $batch)
                            <option value="{{ $batch->id }}">{{ $batch->batch_no ?? '-' }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md mb-3">
                    <label for="type">Type</label>
                    <select id="type" class="form-control js-example-basic-single select2">
                        <option value="costing_report">COSTING REPORT</option>
                        <option value="track_report">TRACK REPORT</option>
                    </select>
                </div>

                <div class="col-md-2 gap-2 d-flex justify-content-center align-items-center">
                    <button type="button" class="btn btn-outline-success px-3" id="generate_btn">Generate</button>
                    <button type="button" class="btn btn-outline-danger px-3" id="reset_btn">Reset</button>
                </div>
            </div>
        </div>

        <div class="card-body" id="report_data"></div>
    </div>
    <!-- Print timestamp will be added here -->
    <div id="printTimestampContainer"></div>
    </div>

    <script>
        $('#generate_btn').click(function() {
            $('#report_data').empty();
            // $('#tfoot_data').empty()
            if ($('#batch_id').val()) {
                $("#global-loader").show();
                $.ajax({
                    type: "post",
                    url: '{{ route('report.ajax-generate-costing-voucher') }}',
                    data: {
                        _token: "{{ csrf_token() }}",
                        batch_id: $('#batch_id').val(),
                        type: $('#type').val(),
                    },
                    dataType: "json",
                    success: function(response) {
                        if (response.success) {
                            $('#report_data').html(response.view);
                        }
                        $("#global-loader").fadeOut("slow");

                    },
                    error: function(error) {
                        console.error(error);
                        $("#global-loader").fadeOut("slow");

                    }
                });
            } else {
                toastr.error('Select Batch to continue !')
            }
        });

        $('#reset_btn').click(function() {
            $('#batch_id').val('').trigger('change');
            $('#report_data').empty();
            // $('#tfoot_data').empty()
        });
    </script>
@endsection

{{-- <style>
    @media print {
        @page {
            margin: 3% !important;
        }

        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        body * {
            visibility: hidden;
        }

        .card-body, 
        table,
        table * {
            visibility: visible;
        }

        table {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
        }

        .table-primary th {
            background-color: transparent !important;
            -webkit-print-color-adjust: exact;
            color-adjust: exact;
        }
    }
</style> --}}

<style>
    .table-excel,
    .table-excel th,
    .table-excel td {
        border: 1px solid #000 !important;
        /* solid black border */
        border-collapse: collapse !important;
    }

    .table-excel th {
        /* background-color: #f2f2f2; */
        /* light header shading (optional) */
        /* font-weight: 600; */
    }

    .table-excel td,
    .table-excel th {
        padding: 6px 8px;
        text-align: center;
        vertical-align: middle;
    }

    @media print {
        #printTimestampContainer {
            position: fixed;
            bottom: 10px;
            right: 20px;
            font-size: 12px;
            color: #000;
            visibility: visible !important;
        }

        @page {
            margin: 3% !important;
        }

        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        /* Hide everything except the card body area */
        body * {
            visibility: hidden;
        }

        /* Show only the report content (batch info + table) */
        .card-body,
        .card-body * {
            visibility: visible;
        }

        /* Position the visible area correctly */
        .card-body {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            padding: 20px;
        }

        /* Keep table formatting */
        table {
            width: 100%;
            border-collapse: collapse;
        }

        .table-primary th {
            background-color: transparent !important;
            -webkit-print-color-adjust: exact;
            color-adjust: exact;
        }

        /* Optional: Add spacing between header and table */
        .mb-3 {
            margin-bottom: 1rem !important;
        }

        .table-excel,
        .table-excel th,
        .table-excel td {
            border: 1px solid #000 !important;
            -webkit-print-color-adjust: exact;
            color-adjust: exact;
        }
    }
</style>
<script>
    function printWithTimestamp() {
        const now = new Date();
        const formatted = now.toLocaleString('en-GB', {
            day: '2-digit',
            month: 'short',
            year: 'numeric',
            hour: '2-digit',
            minute: '2-digit'
        });

        const timestampDiv = document.getElementById('printTimestampContainer');
        timestampDiv.innerHTML = `Printed on: ${formatted}`;

        window.print();
    }
</script>
