@extends('admin.layouts')

@section('content')

<style>
    .report-header {
        background: linear-gradient(135deg, #f8f9fa, #ffffff);
        border: 1px solid #e9ecef;
        border-radius: 12px;
        padding: 20px;
    }

    .report-title {
        font-size: 22px;
        font-weight: 700;
        color: #212529;
    }

    .branch-badge {
        display: inline-block;
        margin-top: 5px;
        padding: 5px 12px;
        border-radius: 20px;
        background: #e9f2ff;
        color: #0d6efd;
        font-size: 13px;
        font-weight: 600;
    }

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

    .summary-card:hover {
        transform: translateY(-2px);
    }

    .summary-label {
        color: #6c757d;
        font-size: 13px;
        font-weight: 600;
        text-transform: uppercase;
    }

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

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

    .table-card {
        border: none;
        border-radius: 12px;
        overflow: hidden;
    }

    .table thead th {
        background: #f8f9fa;
        color: #495057;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        white-space: nowrap;
        padding: 13px 10px;
    }

    .table tbody td {
        font-size: 13px;
        padding: 12px 10px;
        vertical-align: middle;
    }

    .table tbody tr:hover {
        background-color: #f8fbff;
    }

    .profit-positive {
        color: #198754;
        font-weight: 700;
    }

    .profit-negative {
        color: #dc3545;
        font-weight: 700;
    }

    .amount-sales {
        font-weight: 700;
        color: #0d6efd;
    }

    .amount-cost {
        color: #6c757d;
        font-weight: 600;
    }

    .order-badge {
        background: #f1f3f5;
        color: #343a40;
        padding: 5px 8px;
        border-radius: 5px;
        font-size: 12px;
        font-weight: 600;
    }

    .code-badge {
        background: #fff3cd;
        color: #856404;
        padding: 4px 7px;
        border-radius: 5px;
        font-size: 11px;
        font-weight: 600;
    }

    .export-btn {
        border-radius: 7px;
    }

    @media(max-width: 768px) {

        .report-title {
            font-size: 18px;
        }

        .summary-value {
            font-size: 18px;
        }

    }
</style>


{{-- ========================================================= --}}
{{-- HEADER --}}
{{-- ========================================================= --}}

<div class="report-header mb-4">

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

        <div>

            <div class="d-flex align-items-center gap-2">

                <h4 class="report-title mb-0">

                    {{ $category->category_name }}

                </h4>

                <span class="badge bg-primary">
                    Sales Details
                </span>

            </div>


            @if(!empty($branchName))

                <span class="branch-badge">

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

                    Branch:
                    {{ $branchName }}

                </span>

            @else

                <span class="branch-badge">

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

                    All Branches

                </span>

            @endif

        </div>


        {{-- HEADER BUTTONS --}}

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

            {{-- Export --}}

         

            {{-- Print --}}

            <button
                type="button"
                onclick="printReport()"
                class="btn btn-dark export-btn"
            >

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

                Print

            </button>


            {{-- Back --}}

            <a
                href="{{ route('category_wise_sales') }}"
                class="btn btn-secondary export-btn"
            >

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

                Back

            </a>

        </div>

    </div>

</div>



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

@php

    $totalBills = $details
        ->pluck('order_id')
        ->unique()
        ->count();

    $totalQuantity = $details
        ->sum('quantity');

    $totalSales = $details
        ->sum('total');

    $totalCost = $details
        ->sum('cost');

    $totalProfit = $details
        ->sum('profit');

@endphp

{{-- ========================================================= --}}
{{-- CATEGORY SUMMARY CARD --}}
{{-- ========================================================= --}}

<div class="card shadow-sm border-0 mb-4"
     style="border-radius: 12px;">

    <div class="card-body">

        <div class="row align-items-center">

            {{-- CATEGORY NAME --}}

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

                <div class="d-flex align-items-center">

                    <div
                        class="rounded-circle bg-primary bg-opacity-10
                               d-flex align-items-center justify-content-center me-3"
                        style="width:55px;height:55px;"
                    >

                        <i class="fas fa-tags text-primary fa-lg"></i>

                    </div>

                    <div>

                        <small class="text-muted d-block">
                            CATEGORY
                        </small>

                        <h4 class="fw-bold mb-0">

                            {{ $category->category_name }}

                        </h4>

                    </div>

                </div>

            </div>


            {{-- BILL COUNT --}}

            <div class="col-md-2 mt-3 mt-md-0">

                <div class="border-start ps-3">

                    <small class="text-muted d-block">
                        {{ $category->category_name }} BILLS
                    </small>

                    <h5 class="fw-bold mb-0">

                        {{ number_format($totalBills) }}

                    </h5>

                </div>

            </div>


            {{-- QUANTITY --}}

            <div class="col-md-2 mt-3 mt-md-0">

                <div class="border-start ps-3">

                    <small class="text-muted d-block">
                        TOTAL QUANTITY
                    </small>

                    <h5 class="fw-bold mb-0">

                        {{ number_format(
                            $totalQuantity,
                            3
                        ) }}

                    </h5>

                </div>

            </div>


            {{-- SALES --}}

            <div class="col-md-2 mt-3 mt-md-0">

                <div class="border-start ps-3">

                    <small class="text-muted d-block">
                        CATEGORY SALES
                    </small>

                    <h5 class="fw-bold text-primary mb-0">

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

                    </h5>

                </div>

            </div>


            {{-- PROFIT --}}

            <div class="col-md-2 mt-3 mt-md-0">

                <div class="border-start ps-3">

                    <small class="text-muted d-block">
                        CATEGORY PROFIT
                    </small>

                    <h5 class="fw-bold
                        {{ $totalProfit >= 0
                            ? 'text-success'
                            : 'text-danger'
                        }}
                    mb-0">

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

                    </h5>

                </div>

            </div>

        </div>

    </div>

</div>

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

<div class="card filter-card shadow-sm mb-4">

    <div class="card-body">

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

            <h6 class="fw-bold mb-0">

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

                Filter Sales

            </h6>

        </div>


        <form
            method="GET"
            action="{{ route(
                'category.wise.sales.details',
                $category->id
            ) }}"
        >

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


                {{-- FROM DATE --}}

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

                    <label class="form-label fw-semibold">

                        From Date

                    </label>

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

                </div>


                {{-- TO DATE --}}

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

                    <label class="form-label fw-semibold">

                        To Date

                    </label>

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

                </div>


                {{-- ORDER ID --}}

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

                    <label class="form-label fw-semibold">

                        Order ID

                    </label>

                    <input
                        type="text"
                        name="order_id"
                        class="form-control"
                        value="{{ $orderId }}"
                        placeholder="Search Order ID..."
                    >

                </div>


                {{-- SEARCH --}}

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

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

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

                    </button>

                </div>


                {{-- RESET --}}

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

                    <a
                        href="{{ route(
                            'category.wise.sales.details',
                            $category->id
                        ) }}"
                        class="btn btn-outline-secondary w-100"
                    >

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

                        Reset

                    </a>

                </div>

            </div>

        </form>

    </div>

</div>



{{-- ========================================================= --}}
{{-- DETAILS TABLE --}}
{{-- ========================================================= --}}

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

    <div class="card-body">


        {{-- TABLE HEADER --}}

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

            <div>

                <h5 class="fw-bold mb-1">

                    Sales Details

                </h5>

                <small class="text-muted">

                    {{ $details->count() }}
                    product entries found

                </small>

            </div>


            <!-- <div>

                <button
                    type="button"
                    onclick="exportTableToCSV()"
                    class="btn btn-sm btn-success"
                >

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

                    Export Excel

                </button>

            </div> -->

        </div>



        {{-- TABLE --}}

        <div class="table-responsive">

            <table
                id="salesDetailsTable"
                class="table table-bordered table-hover align-middle mb-0"
            >

                <thead>

                    <tr>

                        <th>
                            SNO
                        </th>

                        <th>
                            DATE
                        </th>

                        <th>
                            ORDER ID
                        </th>

                        <th>
                            PRODUCT
                        </th>

                        <th>
                            CODE
                        </th>

                        <th>
                            QTY
                        </th>

                        <th>
                            SELL PRICE
                        </th>

                        <th>
                            SALES
                        </th>

                        <th>
                            COST
                        </th>

                        <th>
                            PROFIT
                        </th>

                    </tr>

                </thead>


                <tbody>

                    @forelse(
                        $details
                        as $index => $detail
                    )

                        <tr>


                            {{-- SNO --}}

                            <td>

                                {{ $index + 1 }}

                            </td>



                            {{-- DATE --}}

                            <td>

                                <span class="text-nowrap">

                                    {{ \Carbon\Carbon::parse(
                                        $detail['date']
                                    )->format('d-m-Y h:i A') }}

                                </span>

                            </td>



                            {{-- ORDER ID --}}

                            <td>

                                <span class="order-badge">

                                    {{ $detail['order_id'] }}

                                </span>

                            </td>



                            {{-- PRODUCT --}}

                            <td>

                                <strong>

                                    {{ $detail['product_name'] }}

                                </strong>

                            </td>



                            {{-- CODE --}}

                            <td>

                                <span class="code-badge">

                                    {{ $detail['code'] }}

                                </span>

                            </td>



                            {{-- QTY --}}

                            <td>

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

                            </td>



                            {{-- SELL PRICE --}}

                            <td>

                                ₹{{ number_format(
                                    $detail['price'],
                                    2
                                ) }}

                            </td>



                            {{-- SALES --}}

                            <td>

                                <span class="amount-sales">

                                    ₹{{ number_format(
                                        $detail['total'],
                                        2
                                    ) }}

                                </span>

                            </td>



                            {{-- COST --}}

                            <td>

                                <span class="amount-cost">

                                    ₹{{ number_format(
                                        $detail['cost'],
                                        2
                                    ) }}

                                </span>

                            </td>



                            {{-- PROFIT --}}

                            <td>

                                @if($detail['profit'] >= 0)

                                    <span class="profit-positive">

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

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

                                    </span>

                                @else

                                    <span class="profit-negative">

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

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

                                    </span>

                                @endif

                            </td>

                        </tr>

                    @empty

                        <tr>

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

                                <div class="text-muted">

                                    <i
                                        class="fas fa-inbox fa-3x mb-3"
                                    ></i>

                                    <h6 class="fw-bold">

                                        No Sales Found

                                    </h6>

                                    <p class="mb-0">

                                        No sales are available
                                        for the selected filters.

                                    </p>

                                </div>

                            </td>

                        </tr>

                    @endforelse

                </tbody>


             

            </table>

        </div>

    </div>

</div>



{{-- ========================================================= --}}
{{-- EXPORT + PRINT JAVASCRIPT --}}
{{-- ========================================================= --}}

<script>

function exportTableToCSV()
{
    const table =
        document.getElementById('salesDetailsTable');

    if (!table) {

        alert('Table not found.');

        return;
    }


    let csv = [];


    // TABLE ROWS

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


    rows.forEach(function(row)
    {

        const cols =
            row.querySelectorAll('th, td');


        let rowData = [];


        cols.forEach(function(col)
        {

            let text =
                col.innerText
                    .replace(/\n/g, ' ')
                    .replace(/\s+/g, ' ')
                    .trim();


            // Escape double quotes

            text =
                text.replace(/"/g, '""');


            rowData.push('"' + text + '"');

        });


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

    });


    // Create CSV file

    const csvContent =
        '\uFEFF' + csv.join('\n');


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


    const url =
        URL.createObjectURL(blob);


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


    link.setAttribute(
        'href',
        url
    );


    link.setAttribute(
        'download',
        'category-sales-details-{{ $category->category_name }}.csv'
    );


    link.style.visibility =
        'hidden';


    document.body.appendChild(link);


    link.click();


    document.body.removeChild(link);


    URL.revokeObjectURL(url);
}



function printReport()
{

    const table =
        document.getElementById(
            'salesDetailsTable'
        );


    if (!table) {

        alert('Table not found.');

        return;
    }


    const printWindow =
        window.open(
            '',
            '_blank',
            'width=1200,height=800'
        );


    printWindow.document.write(`

        <html>

        <head>

            <title>
                {{ $category->category_name }}
                - Sales Details
            </title>

            <style>

                body {
                    font-family: Arial, sans-serif;
                    padding: 25px;
                }

                h2 {
                    margin-bottom: 5px;
                }

                .branch {
                    color: #666;
                    margin-bottom: 20px;
                }

                table {
                    width: 100%;
                    border-collapse: collapse;
                    margin-top: 20px;
                }

                th,
                td {
                    border: 1px solid #ddd;
                    padding: 8px;
                    font-size: 12px;
                }

                th {
                    background: #f3f3f3;
                    font-weight: bold;
                }

                .summary {
                    margin-top: 15px;
                    margin-bottom: 15px;
                    font-size: 14px;
                }

            </style>

        </head>

        <body>

            <h2>
                {{ $category->category_name }}
                - Sales Details
            </h2>

            <div class="branch">

                Branch:
                {{ $branchName ?? 'All Branches' }}

            </div>

            <div class="summary">

                Total Bills:
                {{ number_format($totalBills) }}

                &nbsp;&nbsp; | &nbsp;&nbsp;

                Quantity:
                {{ number_format($totalQuantity, 3) }}

                &nbsp;&nbsp; | &nbsp;&nbsp;

                Sales:
                ₹{{ number_format($totalSales, 2) }}

                &nbsp;&nbsp; | &nbsp;&nbsp;

                Cost:
                ₹{{ number_format($totalCost, 2) }}

                &nbsp;&nbsp; | &nbsp;&nbsp;

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

            </div>

            ${table.outerHTML}

        </body>

        </html>

    `);


    printWindow.document.close();


    printWindow.focus();


    setTimeout(function()
    {

        printWindow.print();

        printWindow.close();

    }, 500);

}

</script>


@endsection