@extends('master.app')
@section('title', 'Retail Invoices')

@section('body')
    <main class="app-content">
        <div class="container-fluid">

            {{-- HERO --}}
            <div class="card border-0 shadow-sm rounded-4 mb-3 retail-animate">
                <div class="card-body p-4 retail-hero">
                    <div class="retail-hero-inner d-flex flex-wrap justify-content-between align-items-center gap-3">
                        <div>
                            <h3 class="mb-1 fw-bold text-white">
                                <i class="fas fa-receipt me-2"></i> Retail Invoices
                            </h3>
                            <div class="text-white-50 small">
                                Unregistered customer invoices • filter, print, report
                            </div>
                        </div>

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


                            <a href="{{ route('customer_retail_bill.create_full') }}"
                               class="btn btn-warning btn-sm rounded-pill px-3 retail-btn">
                                <i class="fas fa-plus-circle me-1"></i> Add Invoice
                            </a>


                        </div>
                    </div>
                </div>
            </div>

            {{-- FILTER (SERVER SIDE) --}}
            <div class="card border-0 shadow-sm rounded-4 mb-3 retail-animate">
                <div class="card-body p-3 p-md-4">
                    <form action="{{ route('customer_retail_bill.index') }}" method="GET" class="row g-3 align-items-end">
                        <div class="col-lg-3 col-md-6">
                            <label class="form-label small text-muted fw-semibold mb-1">Filter Type</label>
                            <select class="form-control" name="type_id" id="type_id">
                                <option value="0" {{ request('type_id') == '0' ? 'selected' : '' }}>Choose</option>
                                <option value="1" {{ request('type_id') == '1' ? 'selected' : '' }}>Invoice Number</option>
                                <option value="2" {{ request('type_id') == '2' ? 'selected' : '' }}>Title</option>
                                <option value="3" {{ request('type_id') == '3' ? 'selected' : '' }}>Customer Name</option>
                                <option value="4" {{ request('type_id') == '4' ? 'selected' : '' }}>Customer Phone</option>
                                <option value="5" {{ request('type_id') == '5' ? 'selected' : '' }}>Date Range</option>
                            </select>
                        </div>

                        <div class="col-lg-3 col-md-6" id="by_invoice_number" style="display:none;">
                            <label class="form-label small text-muted fw-semibold mb-1">Invoice Number</label>
                            <input type="text" name="number" value="{{ request('number') }}" class="form-control"
                                placeholder="e.g. 10021">
                        </div>

                        <div class="col-lg-3 col-md-6" id="by_title" style="display:none;">
                            <label class="form-label small text-muted fw-semibold mb-1">Title</label>
                            <input type="text" name="title" value="{{ request('title') }}" class="form-control"
                                placeholder="e.g. Retail Sale">
                        </div>

                        <div class="col-lg-3 col-md-6" id="by_customer_name" style="display:none;">
                            <label class="form-label small text-muted fw-semibold mb-1">Customer Name</label>
                            <input type="text" name="name" value="{{ request('name') }}" class="form-control"
                                placeholder="e.g. Ahmad">
                        </div>

                        <div class="col-lg-3 col-md-6" id="by_customer_phone" style="display:none;">
                            <label class="form-label small text-muted fw-semibold mb-1">Customer Phone</label>
                            <input type="text" name="phone" value="{{ request('phone') }}" class="form-control"
                                placeholder="e.g. 0700...">
                        </div>

                        <div class="col-lg-3 col-md-6" id="by_date" style="display:none;">
                            <label class="form-label small text-muted fw-semibold mb-1">From</label>
                            <input type="date" name="f_date" value="{{ request('f_date') }}" class="form-control">
                        </div>

                        <div class="col-lg-3 col-md-6" id="by_date2" style="display:none;">
                            <label class="form-label small text-muted fw-semibold mb-1">To</label>
                            <input type="date" name="t_date" value="{{ request('t_date') }}" class="form-control">
                        </div>

                        <div class="col-lg-3 col-md-6">
                            <button type="submit" class="btn btn-primary rounded-pill px-4 retail-btn">
                                <i class="fas fa-filter me-1"></i> Filter
                            </button>

                            <a href="{{ route('customer_retail_bill.index') }}" class="btn btn-outline-secondary rounded-pill px-4 retail-btn">
                                <i class="fas fa-redo me-1"></i> Reset
                            </a>
                        </div>
                    </form>
                </div>
            </div>

            {{-- TABLE --}}
            <div class="card border-0 shadow-sm rounded-4 retail-animate">
                <div class="card-header bg-white border-0 rounded-top-4 pt-4 pb-3">
                    <div class="d-flex flex-wrap justify-content-between align-items-center gap-2">
                        <div>
                            <h5 class="mb-0 fw-bold" style="color:#1f2d3d;">
                                <i class="fas fa-table me-2"></i>Invoices List
                            </h5>
                            <div class="text-muted small">Actions are direct (no dropdown needed)</div>
                        </div>

                        <div class="position-relative">
                            <i class="fas fa-search retail-search-icon"></i>
                            <input type="text" id="tableSearch"
                                class="form-control form-control-sm rounded-pill ps-4"
                                placeholder="Search invoice, name, phone...">
                        </div>
                    </div>
                </div>

                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table align-middle mb-0 retail-table" id="customer_retail">
                            <thead>
                                <tr>
                                    <th>Invoice</th>
                                    <th>Customer</th>
                                    <th>Phone</th>
                                    <th class="text-end">Total</th>
                                    <th>Date</th>
                                    <th class="text-center">Actions</th>
                                </tr>
                            </thead>
                            <tbody id="retailTableBody">
                                @foreach ($bills as $row)
                                    <tr class="retail-row">
                                        <td class="fw-bold">
                                            <span class="badge rounded-pill bg-primary-subtle text-primary px-3 py-2">
                                                #{{ $row->invoice_number }}
                                            </span>
                                        </td>

                                        <td>
                                            <div class="d-flex align-items-center gap-2">
                                                <span class="retail-avatar"><i class="fas fa-user"></i></span>
                                                <div>
                                                    <div class="fw-semibold">{{ $row->customer_name }}</div>
                                                    <div class="text-muted small">{{ $row->title }}</div>
                                                </div>
                                            </div>
                                        </td>

                                        <td>
                                            <span class="badge rounded-pill bg-light text-dark px-3 py-2">
                                                <i class="fas fa-phone me-1 text-muted"></i> {{ $row->customer_phone }}
                                            </span>
                                        </td>

                                        <td class="text-end fw-semibold">
                                            {{ number_format($row->grand_total ?? 0, 2) }}
                                        </td>

                                        <td class="text-nowrap">
                                            <span class="text-muted small">
                                                <i class="far fa-calendar-alt me-1"></i> {{ $row->invoice_date }}
                                            </span>
                                        </td>

                                        {{-- DIRECT ACTIONS (Always clickable) --}}
                                        <td class="text-center">
                                            <a class="btn btn-sm btn-outline-primary rounded-pill px-3 me-1"
                                               href="{{ route('customer_retail_bill.show', $row->id) }}"
                                               title="Show">
                                                <i class="fas fa-eye"></i>
                                            </a>

                                            <a class="btn btn-sm btn-outline-success rounded-pill px-3 me-1"
                                               href="{{ route('customer_retail_bill.edit', $row->id) }}"
                                               title="Edit">
                                                <i class="fas fa-edit"></i>
                                            </a>

                                            {{-- <a class="btn btn-sm btn-outline-dark rounded-pill px-3 me-1"
                                               href="{{ route('customer_retail_bill.print', $row->id) }}"
                                               target="_blank" title="Print">
                                                <i class="fas fa-print"></i>
                                            </a> --}}

                                            <a class="btn btn-sm btn-outline-danger rounded-pill px-3"
                                               href="{{ route('customer_retail_bill.delete', $row->id) }}"
                                               onclick="return confirmDeleteRetail();"
                                               title="Delete">
                                                <i class="fas fa-trash"></i>
                                            </a>
                                        </td>
                                    </tr>
                                @endforeach

                                @if ($bills->count() == 0)
                                    <tr>
                                        <td colspan="6" class="text-center py-5">
                                            <div class="text-muted">
                                                <i class="fas fa-folder-open fa-2x mb-2"></i>
                                                <div class="fw-semibold">No invoices found</div>
                                                <div class="small">Try changing filters or add a new invoice.</div>
                                            </div>
                                        </td>
                                    </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="card-footer bg-white border-0 rounded-bottom-4 p-3">
                    <div class="d-flex flex-wrap justify-content-between align-items-center gap-2">
                        <div class="text-muted small">Showing {{ $bills->count() }} invoices</div>
                        <div>{{ $bills->links('pagination::bootstrap-4') }}</div>
                    </div>
                </div>
            </div>

        </div>
    </main>

    {{-- keep if you want --}}
    {{-- @include('sale.retail_bills.filter-modal') --}}
@endsection

@section('pageCSS')
    <style>
        .rounded-4 { border-radius: 1rem !important; }
        .retail-animate { animation: retailFade .55s ease-in-out; }
        @keyframes retailFade { from {opacity:0; transform:translateY(8px);} to {opacity:1; transform:translateY(0);} }

        /* HERO: IMPORTANT FIX -> do NOT block clicks */
        .retail-hero{
            border-radius: 1rem;
            background: linear-gradient(135deg, #0d6efd, #4f46e5);
            position: relative;
            overflow: hidden;
        }
        .retail-hero:before{
            content:"";
            position:absolute;
            width:260px;height:260px;border-radius:999px;
            background: rgba(255,255,255,.12);
            top:-90px; right:-90px;
            pointer-events: none; /* ✅ this fixes button click */
        }
        .retail-hero-inner{ position: relative; z-index: 2; } /* ✅ ensure buttons above */

        .retail-btn { transition: transform .15s ease, box-shadow .15s ease; }
        .retail-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,.12); }

        .retail-table thead th{
            border-bottom: 1px solid #eef1f6 !important;
            background: #fafbff;
            color:#1f2d3d;
            font-weight:700;
            padding:14px 14px;
        }
        .retail-table tbody td{
            border-top: 1px solid #f1f3f8 !important;
            padding:14px 14px;
        }
        .retail-row:hover{ background:#f8fbff; }

        .retail-avatar{
            width:36px;height:36px;border-radius:999px;
            display:flex;align-items:center;justify-content:center;
            background: rgba(79,70,229,.10);
            color:#4f46e5;
            flex-shrink:0;
        }

        .retail-search-icon{
            position:absolute;
            left:12px;
            top:50%;
            transform:translateY(-50%);
            font-size:12px;
            color:#6c757d;
            pointer-events:none;
        }
    </style>
@endsection

@section('pageJs')
    <script>
        $(".app-menu").removeClass("active");
        $("#nav_salei").addClass("active");
        $("#salei").addClass("is-expanded");
        $("#retail_invoices").addClass("active");

        function confirmDeleteRetail() {
            return confirm("Are you sure you want to delete this invoice? This action cannot be undone.");
        }

        // show/hide filter fields (works on load + change)
        function updateFilterUI() {
            let type = $("#type_id").val();

            $("#by_invoice_number, #by_title, #by_customer_name, #by_customer_phone, #by_date, #by_date2").hide();

            if (type == 1) $("#by_invoice_number").show();
            else if (type == 2) $("#by_title").show();
            else if (type == 3) $("#by_customer_name").show();
            else if (type == 4) $("#by_customer_phone").show();
            else if (type == 5) { $("#by_date").show(); $("#by_date2").show(); }
        }

        $("#type_id").on("change", updateFilterUI);
        updateFilterUI();

        // Quick search (client-side for current page)
        $("#tableSearch").on("keyup", function() {
            let val = $(this).val().toLowerCase().trim();
            $("#retailTableBody tr").filter(function() {
                $(this).toggle($(this).text().toLowerCase().indexOf(val) > -1);
            });
        });
    </script>
@endsection