@extends('layouts.app')

@section('title', 'Sales Report')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2 class="fw-bold">Sales Report</h2>
</div>

<div class="card mb-4">
    <div class="card-body">
        <form action="{{ route('reports.sales') }}" method="GET" class="row align-items-end">
            <div class="col-md-4">
                <label class="form-label">From Date</label>
                <input type="date" name="from_date" class="form-control" value="{{ $fromDate }}" required>
            </div>
            <div class="col-md-4">
                <label class="form-label">To Date</label>
                <input type="date" name="to_date" class="form-control" value="{{ $toDate }}" required>
            </div>
            <div class="col-md-4">
                <button type="submit" class="btn btn-primary"><i class="fas fa-filter"></i> Filter</button>
                <a href="{{ route('reports.sales') }}" class="btn btn-secondary">Reset</a>
            </div>
        </form>
    </div>
</div>

<div class="card-table-wrapper">
    <div class="table-responsive">
        <table id="salesTable" class="table">
            <thead>
                <tr>
                    <th>Invoice No</th>
                    <th>Date</th>
                    <th>Customer Name</th>
                    <th class="text-end">Amount (₹)</th>
                </tr>
            </thead>
            <tbody>
                @foreach($invoices as $invoice)
                <tr>
                    <td><span class="badge bg-primary bg-opacity-10 text-primary px-2 py-1">{{ $invoice->invoice_no }}</span></td>
                    <td>{{ $invoice->invoice_date->format('d/m/Y') }}</td>
                    <td class="fw-bold text-dark">{{ $invoice->customer->customer_name }}</td>
                    <td class="text-end fw-bold text-success">{{ number_format($invoice->grand_total, 2) }}</td>
                </tr>
                @endforeach
            </tbody>
            <tfoot>
                <tr class="fw-bold bg-light border-top">
                    <td colspan="3" class="text-end py-3">Total Sales:</td>
                    <td class="text-end text-primary fs-5 py-3">₹{{ number_format($totalSales, 2) }}</td>
                </tr>
            </tfoot>
        </table>
    </div>
</div>
@endsection

@push('scripts')
<style>
    /* DataTables Buttons Customization */
    .dt-buttons .btn {
        background: #10B981;
        color: white;
        border: none;
        border-radius: 8px;
        font-weight: 600;
        padding: 6px 16px;
        margin-left: 10px;
        transition: all 0.2s ease;
    }
    .dt-buttons .btn:hover {
        background: #059669;
        transform: translateY(-1px);
        box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3);
    }
</style>
<script>
$(document).ready(function() {
    $('#salesTable').DataTable({
        "order": [[ 1, "asc" ]],
        "dom": "<'row mb-3'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6 d-flex justify-content-md-end justify-content-center'fB>>" +
               "<'row'<'col-sm-12'tr>>" +
               "<'row mt-3'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
        "buttons": [
            {
                extend: 'excelHtml5',
                text: '<i class="fas fa-file-excel me-1"></i> Export to Excel',
                className: 'btn btn-success btn-sm',
                title: 'Riyasri Silks - Sales Report',
                footer: true
            }
        ]
    });
});
</script>
@endpush