@extends('admin.layouts')

@section('content')

<style>

    .report-tabs {
        display: flex;
        gap: 6px;
        margin-bottom: 15px;
        flex-wrap: wrap;
    }

    .report-tab {
        padding: 10px 18px;
        border: 1px solid #ffc107;
        border-radius: 10px;
        color: #555;
        text-decoration: none;
        font-weight: 600;
        background: #fff;
    }

    .report-tab.active {
        background: #ffc107;
        color: #000;
    }

    .report-card {
        border: none;
        border-radius: 10px;
        box-shadow: 0 2px 12px rgba(0,0,0,.06);
    }

    .summary-card {
        border-radius: 12px;
        border: none;
    }

    .summary-title {
        font-size: 13px;
        color: #777;
        font-weight: 600;
    }

    .summary-value {
        font-size: 22px;
        font-weight: 700;
        margin-top: 5px;
    }

    .date-badge {
        font-weight: 600;
        color: #555;
    }

    .view-btn {
        background: #ffc107;
        border: none;
        color: #000;
        font-weight: 600;
        border-radius: 7px;
        padding: 6px 18px;
    }

    .view-btn:hover {
        background: #e0a800;
        color: #000;
    }

    .table thead th {
        font-size: 13px;
        text-transform: uppercase;
        color: #555;
        white-space: nowrap;
    }

    .table tbody td {
        font-size: 14px;
        vertical-align: middle;
    }

    .amount {
        font-weight: 600;
    }

    @media print {

        .no-print {
            display: none !important;
        }

        .report-card {
            box-shadow: none !important;
        }
    }

</style>




<div class="card report-card mb-3">

    <div class="card-body">

        <div class="d-flex justify-content-between
                    align-items-center flex-wrap gap-3">

            <div>

                <h4 class="fw-bold mb-1">
                    Date-wise Sales Report
                </h4>

                @if(!empty($branchName))

                    <span class="text-muted">

                        <i class="fas fa-store me-1"></i>

                        Branch:
                        <strong>
                            {{ $branchName }}
                        </strong>

                    </span>

                @else

                    <span class="text-muted">

                        <i class="fas fa-building me-1"></i>

                        All Branches

                    </span>

                @endif

            </div>


            <div class="d-flex gap-2 no-print">

                <button
                    type="button"
                    onclick="window.print()"
                    class="btn btn-dark"
                >
                    <i class="fas fa-print me-1"></i>
                    Print
                </button>

                <button
                    type="button"
                    onclick="exportDateReport()"
                    class="btn btn-success"
                >
                    <i class="fas fa-download me-1"></i>
                    Export
                </button>

            </div>

        </div>

    </div>

</div>


{{-- ========================================================= --}}
{{-- SUMMARY CARDS --}}
{{-- ========================================================= --}}

<div class="row g-3 mb-3">

    <div class="col-md-3 col-6">

        <div class="card summary-card shadow-sm">

            <div class="card-body">

                <div class="summary-title">
                    Total Bills
                </div>

                <div class="summary-value">
                    {{ number_format($totalBills) }}
                </div>

            </div>

        </div>

    </div>


    <div class="col-md-3 col-6">

        <div class="card summary-card shadow-sm">

            <div class="card-body">

                <div class="summary-title">
                    Total Quantity
                </div>

                <div class="summary-value">
                    {{ number_format($totalQuantity, 3) }}
                </div>

            </div>

        </div>

    </div>


    <div class="col-md-3 col-6">

        <div class="card summary-card shadow-sm">

            <div class="card-body">

                <div class="summary-title">
                    Total Sales Amount
                </div>

                <div class="summary-value text-primary">
                    ₹{{ number_format($totalAmount, 2) }}
                </div>

            </div>

        </div>

    </div>


    <div class="col-md-3 col-6">

        <div class="card summary-card shadow-sm">

            <div class="card-body">

                <div class="summary-title">
                    Total Profit
                </div>

                <div class="summary-value
                    {{ $totalProfit >= 0
                        ? 'text-success'
                        : 'text-danger' }}">

                    ₹{{ number_format($totalProfit, 2) }}

                </div>

            </div>

        </div>

    </div>

</div>


{{-- ========================================================= --}}
{{-- FILTER --}}
{{-- ========================================================= --}}

<div class="card report-card mb-3 no-print">

    <div class="card-body">

        <form
            method="GET"
            action="{{ route('date_wise_sales') }}"
        >

            <div class="row g-3 align-items-end">

                <div class="col-md-4">

                    <label class="form-label fw-semibold">
                        From Date
                    </label>

                    <input
                        type="date"
                        name="from_date"
                        class="form-control"
                        value="{{ $fromDate }}"
                    >

                </div>


                <div class="col-md-4">

                    <label class="form-label fw-semibold">
                        To Date
                    </label>

                    <input
                        type="date"
                        name="to_date"
                        class="form-control"
                        value="{{ $toDate }}"
                    >

                </div>


                <div class="col-md-2">

                    <button
                        type="submit"
                        class="btn btn-primary w-100"
                    >

                        <i class="fas fa-search me-1"></i>

                        Search

                    </button>

                </div>


                <div class="col-md-2">

                    <a
                        href="{{ route('date_wise_sales') }}"
                        class="btn btn-outline-secondary w-100"
                    >

                        <i class="fas fa-sync-alt me-1"></i>

                        Reset

                    </a>

                </div>

            </div>

        </form>

    </div>

</div>


{{-- ========================================================= --}}
{{-- DATE TABLE --}}
{{-- ========================================================= --}}

<div class="card report-card">

    <div class="card-body">

        <div class="d-flex justify-content-between
                    align-items-center mb-3">

            <div>

                <h5 class="fw-bold mb-1">
                    Date-wise Sales Summary
                </h5>

                <small class="text-muted">
                    Total sales grouped by date
                </small>

            </div>

            <span class="badge bg-primary">
                {{ $dateReport->count() }} Days
            </span>

        </div>


        <div class="table-responsive">

            <table
                id="dateReportTable"
                class="table table-bordered table-hover"
            >

                <thead class="table-light">

                    <tr>

                        <th>SNO</th>

                        <th>DATE</th>

                        <th>BILLS</th>

                        <th>AMOUNT</th>

                        <th>COUNT</th>

                        <th>PROFIT</th>

                        <th>ACTION</th>

                    </tr>

                </thead>


                <tbody>

                    @forelse($dateReport as $index => $report)

                        <tr>

                            <td>
                                {{ $index + 1 }}
                            </td>


                            <td>

                                <span class="date-badge">

                                    {{ \Carbon\Carbon::parse(
                                        $report['date']
                                    )->format('d-m-Y') }}

                                </span>

                            </td>


                            <td>
                                {{ number_format($report['bills']) }}
                            </td>


                            <td>

                                <span class="amount">

                                    ₹{{ number_format(
                                        $report['amount'],
                                        2
                                    ) }}

                                </span>

                            </td>


                            <td>

                                {{ number_format(
                                    $report['quantity'],
                                    3
                                ) }}

                            </td>


                            <td>

                                <strong
                                    class="{{ $report['profit'] >= 0
                                        ? 'text-success'
                                        : 'text-danger' }}"
                                >

                                    ₹{{ number_format(
                                        $report['profit'],
                                        2
                                    ) }}

                                </strong>

                            </td>


                            <td>

                                <a
                                    href="{{ route(
                                        'date.wise.sales.details',
                                        $report['date']
                                    ) }}"
                                    class="btn view-btn btn-sm"
                                >

                                    <i class="fas fa-eye me-1"></i>

                                    View

                                </a>

                            </td>

                        </tr>

                    @empty

                        <tr>

                            <td
                                colspan="7"
                                class="text-center py-5"
                            >

                                <i
                                    class="fas fa-calendar-times
                                    fa-2x text-muted mb-2"
                                ></i>

                                <h6 class="text-muted">
                                    No Sales Found
                                </h6>

                            </td>

                        </tr>

                    @endforelse

                </tbody>

            </table>

        </div>

    </div>

</div>


<script>

function exportDateReport()
{
    const table =
        document.getElementById('dateReportTable');

    let csv = [];

    const rows =
        table.querySelectorAll('tr');

    rows.forEach(function(row) {

        let rowData = [];

        row.querySelectorAll('th, td')
            .forEach(function(cell) {

                rowData.push(
                    '"' +
                    cell.innerText
                        .replace(/"/g, '""')
                        .trim() +
                    '"'
                );

            });

        csv.push(
            rowData.join(',')
        );

    });


    const blob =
        new Blob(
            [csv.join('\n')],
            {
                type: 'text/csv;charset=utf-8;'
            }
        );


    const url =
        URL.createObjectURL(blob);


    const link =
        document.createElement('a');


    link.href = url;

    link.download =
        'date-wise-sales-report.csv';


    link.click();


    URL.revokeObjectURL(url);
}

</script>

@endsection