@extends('admin.layouts')

@section('content')

<style>

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

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

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

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

    .order-badge {
        background: #eef2ff;
        color: #4f46e5;
        padding: 5px 9px;
        border-radius: 6px;
        font-weight: 600;
        font-size: 12px;
    }

    .code-badge {
        background: #f3f4f6;
        padding: 5px 8px;
        border-radius: 5px;
        font-size: 12px;
    }

    .table thead th {
        font-size: 12px;
        white-space: nowrap;
        text-transform: uppercase;
    }

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

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

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

    @media print {

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

        .details-header {
            box-shadow: none !important;
        }
    }

</style>


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

<div class="card details-header mb-3">

    <div class="card-body">

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

            <div>

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

                    <a
                        href="{{ route(
                            'date_wise_sales',
                            [
                                'from_date' => request('from_date'),
                                'to_date'   => request('to_date'),
                            ]
                        ) }}"
                        class="btn btn-light btn-sm no-print"
                    >

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

                    </a>


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

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

                        - Sales Details

                    </h4>

                </div>


                @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">

                        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="exportDetails()"
                    class="btn btn-success"
                >

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

                    Export

                </button>

            </div>

        </div>

    </div>

</div>


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

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

    <div class="col-md 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 col-6">

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

            <div class="card-body">

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

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

            </div>

        </div>

    </div>


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

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

            <div class="card-body">

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

                <div class="summary-value text-primary">

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

                </div>

            </div>

        </div>

    </div>


    <div class="col-md 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 details-header mb-3 no-print">

    <div class="card-body">

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

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

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

                    <label class="form-label fw-semibold">
                        Search Order ID
                    </label>

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

                </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.details',
                            $date
                        ) }}"
                        class="btn btn-outline-secondary w-100"
                    >

                        Reset

                    </a>

                </div>

            </div>

        </form>

    </div>

</div>


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

<div class="card details-header">

    <div class="card-body">

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

            <div>

                <h5 class="fw-bold mb-1">
                    Sales Details
                </h5>

                <small class="text-muted">

                    {{ $details->count() }}

                    product entries found

                </small>

            </div>

        </div>


        <div class="table-responsive">

            <table
                id="detailsTable"
                class="table table-bordered table-hover align-middle"
            >

                <thead class="table-light">

                    <tr>

                        <th>SNO</th>

                        <th>ORDER ID</th>

                        <th>DATE</th>

                        <th>PRODUCT</th>

                        <th>CODE</th>

                        <th>QTY</th>

                        <th>PRICE</th>

                        <th>TOTAL</th>

                        <th>COST</th>

                        <th>PROFIT</th>

                    </tr>

                </thead>


                <tbody>

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

                        <tr>

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


                            <td>

                                <span class="order-badge">

                                    {{ $detail['order_id'] }}

                                </span>

                            </td>


                            <td>

                                <span class="text-nowrap">

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

                                </span>

                            </td>


                            <td>

                                <strong>

                                    {{ $detail['product_name'] }}

                                </strong>

                            </td>


                            <td>

                                <span class="code-badge">

                                    {{ $detail['code'] }}

                                </span>

                            </td>


                            <td>

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

                            </td>


                            <td>

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

                            </td>


                            <td>

                                <strong>

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

                                </strong>

                            </td>


                            <td>

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

                            </td>


                            <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"
                            >

                                <i
                                    class="fas fa-inbox
                                    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 exportDetails()
{
    const table =
        document.getElementById('detailsTable');

    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 =
        'sales-details-{{ $date }}.csv';


    link.click();


    URL.revokeObjectURL(url);
}

</script>

@endsection