@extends('admin.layouts')
@section('title', 'User Management')
@section('header')
<!-- DataTable CSS -->
<link rel="stylesheet" type="text/css" href="{{ asset('/assets') }}/css/datatable/dataTables.bootstrap5.min.css">
<link rel="stylesheet" type="text/css" href="{{ asset('/assets') }}/css/datatable/responsive.bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="{{ asset('/assets') }}/css/datatable/buttons.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="{{ asset('/assets') }}/css/formILY.css">
<link rel="stylesheet" href="{{ asset('assets/css/bootstrap.min.css') }}">
<style>
    #totalAmountDisplay {
        font-size: 20px !important;
        font-weight: 600 !important;
    }
    .date-input {
        border: none;
        background: transparent;
        cursor: pointer;
    }
    .date-input::-webkit-calendar-picker-indicator {
        cursor: pointer;
    }
</style>
@endsection
@section('content')
<div class="container-fluid page-wrapper category-container">
    <div class="row">
        <div class="d-flex justify-content-between align-items-center">
            <h3 class="page-top-heading">Quotation History</h3>
        </div>
    </div>
    <div class="row mt-1">
        <div class="col-md-8">
            <div id="totalAmountDisplay" class="total-amount-display"></div>
        </div>
        <div class="col-md-4 d-flex justify-content-end">
            <button class="btn btn-success excel-btn mb-3">Export to Excel</button>
        </div>
    </div>
    <div class="row mt-1">
        <div class="col-lg-12">
            <div class="card m-0 datatable-card">
                <div class="row mt-3 g-3 align-items-end p-3">
                    <!-- From Date -->
                    <div class="col-12 col-sm-6 col-md-2">
                        <label for="fromDate" class="form-label">From Date</label>
                        <input type="date" class="form-control" id="fromDate">
                    </div>
                    <!-- To Date -->
                    <div class="col-12 col-sm-6 col-md-2">
                        <label for="toDate" class="form-label">To Date</label>
                        <input type="date" class="form-control" id="toDate">
                    </div>
                    <!-- Phone Search -->
                    <div class="col-12 col-md-4">
                        <label for="phoneSearch" class="form-label">Search Phone No</label>
                        <input type="text" id="phoneSearch" class="form-control" placeholder="Enter phone number">
                    </div>
                    <div class="col-6 col-sm-4 col-md-2">
                        <button class="btn btn-primary w-100" id="filterBtn">Filter</button>
                    </div>
                    <div class="col-6 col-sm-4 col-md-2">
                        <button class="btn btn-secondary w-100" id="resetBtn">Reset</button>
                    </div>
                </div>
                <hr>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="data-table" class="table align-middle mb-0 w-100">
                            <thead>
                                <tr>
                                    <th>SN0</th>
                                    <th>ORDER&nbsp;ID</th>
                                    <th>NAME</th>
                                    <th>USER&nbsp;ID</th>
                                    <th>PHONE&nbsp;No</th>
                                    <th>DATE</th>
                                    <th>MEMBERSHIP</th>
                                    <th>AMOUNT</th>
                                    <th>STATUS</th>
                                    <th>ACTION</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if ($quotations->isEmpty())
                                <tr>
                                    <td colspan="11" class="text-center">No quotation records found.</td>
                                </tr>
                                @else
                                @foreach ($quotations as $index => $quotation)
                                <tr>
                                    <td>{{ $index + 1 }}</td>
                                    <td>{{ $quotation->order_id ?? 'N/A' }}</td>
                                    <td>{{ $quotation->customer_details['name'] ?? 'N/A' }}</td>
                                    <td>{{ $quotation->user_id ?? 'N/A' }}</td>
                                    <td>
                                        {{ $quotation->customer_details['phone_number'] ?? 'N/A' }}
                                    </td>
                                    <td>
                                        {{ $quotation->created_at->format('Y-m-d') }}
                                    </td>
                                    <td>
                                        {{ $quotation->customer_details['membership'] ?? 'N/A' }}
                                    </td>
                                    <td>
                                        {{ number_format($quotation->total_amount, 2) }}
                                    </td>
                                    <td>
                                        @if ($quotation->is_billed === 'completed')
                                        <span class="badge bg-success">Billed</span>
                                        @else
                                        <span class="badge bg-warning text-dark">Pending</span>
                                        @endif
                                    </td>
                                    <td>
                                        <a href="{{ url('admin/quotation_invoice_a4/' . $quotation->order_id) }}"
                                            target="_blank"
                                            class="btn btn-info btn-sm">
                                            View Invoice
                                        </a>
                                        <a href="{{ route('edit_quotation', ['id' => $quotation->order_id]) }}"
                                            class="btn btn-warning btn-sm">
                                            Edit
                                        </a>
                                        @if ($quotation->is_billed === 'completed')
                                        <button class="btn btn-secondary btn-sm" disabled>
                                            Convert Bill
                                        </button>
                                        @else
                                        <a href="{{ route('quotation_convert_bill', $quotation->order_id) }}"
                                            class="btn btn-success btn-sm">
                                            Convert Bill
                                        </a>
                                        @endif
                                    </td>
                                </tr>
                                @endforeach
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('footer')
<script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>
<!-- DataTables JS -->
<script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/dataTables.bootstrap5.min.js"></script>
<script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/buttons.html5.min.js"></script>
<script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/buttons.print.min.js"></script>
<script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/jszip.min.js"></script>
<script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/pdfmake.min.js"></script>
<script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/vfs_fonts.js"></script>
<!-- Moment JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script>
    $(document).ready(function() {
        let table = $('#data-table').DataTable({
 dom: `
        <"row mb-3"
            <"col-12 col-md-6 mb-2 mb-md-0"B>
            <"col-12 col-md-6 d-flex justify-content-md-end justify-content-start"f>
        >
        rt
        <"row mt-3"
            <"col-12 col-md-6"i>
            <"col-12 col-md-6 d-flex justify-content-md-end justify-content-start"p>
        >
    `,
            buttons: [{
                extend: 'excelHtml5',
                className: 'buttons-excel d-none',
                filename: 'quotation_history',
                exportOptions: {
                    columns: ':visible:not(:last-child)'
                }
            }],
            order: [
                [5, 'desc']
            ],
            responsive: false,
            scrollX:true,
        });
        $('.excel-btn').on('click', function() {
            table.button('.buttons-excel').trigger();
        });
        $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
            let fromDate = $('#fromDate').val();
            let toDate = $('#toDate').val();
            let phoneSearch = $('#phoneSearch').val().toLowerCase();
            let date = data[5];
            let phone = data[4];
            if (!date) return true;
            let rowDate = moment(date, 'YYYY-MM-DD');
            if (fromDate && toDate) {
                let start = moment(fromDate, 'YYYY-MM-DD');
                let end = moment(toDate, 'YYYY-MM-DD');
                if (!rowDate.isBetween(start, end, undefined, '[]')) {
                    return false;
                }
            }
            if (phoneSearch && !phone.toLowerCase().includes(phoneSearch)) {
                return false;
            }
            return true;
        });
        $('#filterBtn').on('click', function() {
            table.draw();
        });
        $('#resetBtn').on('click', function() {
            $('#fromDate').val('');
            $('#toDate').val('');
            $('#phoneSearch').val('');
            table.search('').draw();
        });
        function calculateTotalAmount() {
            let total = 0;
            table.rows({
                search: 'applied'
            }).every(function() {
                let rowData = this.data();
                let amountText = rowData[7] || '0';
                amountText = amountText.toString().replace(/[₹, ]/g, '');
                let amount = parseFloat(amountText);
                if (!isNaN(amount)) total += amount;
            });
            $('#totalAmountDisplay').html(
                '<h5><b>Total Amount: ₹ ' +
                total.toLocaleString(undefined, {
                    minimumFractionDigits: 2
                }) +
                '</b></h5>'
            );
        }
        calculateTotalAmount();
        table.on('draw', function() {
            calculateTotalAmount();
        });
    });
</script>
@endsection