@extends('master.app')
@section('title', 'Customer Receiveds')

@section('pageCSS')
<style>
    :root{
        --radius: 16px;
        --shadow: 0 10px 28px rgba(2, 6, 23, .06);
        --muted: #6b7280;
    }
    .card-soft{ border:0; border-radius:var(--radius); box-shadow:var(--shadow); }
    .pill{
        padding:.35rem .75rem;border-radius:999px;background:rgba(15, 23, 42, .06);
        display:inline-flex;align-items:center;gap:.45rem;font-size:.88rem;
    }
    .muted-hint{ font-size:.82rem; color:var(--muted); }
    .btn-rounded{ border-radius:999px; }
    .table thead th{ white-space:nowrap; }
    .action-btn{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:999px; }
    .action-btn:hover{ background: rgba(13,110,253,.10); }
</style>
@endsection

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

    @include('general.valert')

    <div class="card card-soft mb-3">
        <div class="card-body p-4">
            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                <div>
                    <h4 class="fw-bold mb-0">
                        <i class="fa fa-hand-holding-dollar text-primary me-1"></i> Customer Receiveds
                    </h4>
                    <div class="muted-hint">Filter • View • Edit • Print receipt</div>
                </div>

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


                    <button type="button" class="btn btn-primary btn-sm btn-rounded" id="toggleFilter">
                        <i class="fa fa-filter me-1"></i> Filter
                    </button>

                    <a href="{{ route('customer_recieved.create') }}" class="btn btn-success btn-sm btn-rounded">
                        <i class="fa fa-plus me-1"></i> Add
                    </a>
                </div>
            </div>

            <div class="mt-3 d-flex gap-2 flex-wrap">
                <span class="pill"><i class="fa fa-list"></i> Records: <b>{{ $data->total() }}</b></span>
                <span class="pill"><i class="fa fa-calendar"></i> Today: <b>{{ date('Y-m-d') }}</b></span>
            </div>
        </div>
    </div>

    {{-- ✅ FILTER CARD (same index route) --}}
    <div class="card card-soft mb-3" id="filterCard" style="display:none;">
        <div class="card-body p-4">
            <form method="GET" action="{{ route('customer_recieved.index') }}">
                <div class="row g-3">

                    <div class="col-md-3">
                        <label class="form-label small fw-semibold">
                            <i class="fa fa-sliders text-primary me-1"></i> Filter Type
                        </label>
                        <select class="form-control select2" name="type_id" id="type_id" style="width:100%;">
                            <option value="1" @selected(request('type_id')==1)>By Received Number</option>
                            <option value="2" @selected(request('type_id')==2)>By Title</option>
                            <option value="3" @selected(request('type_id',3)==3)>By Date</option>
                        </select>
                    </div>

                    <div class="col-md-3">
                        <label class="form-label small fw-semibold">
                            <i class="fa fa-user text-primary me-1"></i> Customer
                        </label>
                        <select class="form-control select2" name="customer_id" style="width:100%;">
                            <option value="">All Customers</option>
                            @foreach($customers as $c)
                                <option value="{{ $c->id }}" @selected(request('customer_id')==$c->id)>
                                    {{ $c->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-3">
                        <label class="form-label small fw-semibold">
                            <i class="fa fa-coins text-primary me-1"></i> Currency
                        </label>
                        <select class="form-control select2" name="currency_id" style="width:100%;">
                            <option value="">All Currency</option>
                            @foreach($currencies as $cur)
                                <option value="{{ $cur->id }}" @selected(request('currency_id')==$cur->id)>
                                    {{ $cur->title_en }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-3">
                        <label class="form-label small fw-semibold">
                            <i class="fa fa-toggle-on text-primary me-1"></i> Status
                        </label>
                        <select class="form-control select2" name="status" style="width:100%;">
                            <option value="">All</option>
                            <option value="1" @selected(request('status')==='1')>Active</option>
                            <option value="0" @selected(request('status')==='0')>Inactive</option>
                        </select>
                    </div>

                    {{-- By number --}}
                    <div class="col-md-4" id="by_invoice_number" style="display:none;">
                        <label class="form-label small fw-semibold">
                            <i class="fa fa-hashtag text-primary me-1"></i> Received Number
                        </label>
                        <input type="text" class="form-control" name="number" value="{{ request('number') }}" placeholder="ex: 1001">
                    </div>

                    {{-- By title --}}
                    <div class="col-md-4" id="by_title" style="display:none;">
                        <label class="form-label small fw-semibold">
                            <i class="fa fa-pen text-primary me-1"></i> Title
                        </label>
                        <input type="text" class="form-control" name="title" value="{{ request('title') }}" placeholder="ex: advance payment">
                    </div>

                    {{-- By date --}}
                    <div class="col-md-4" id="by_date">
                        <label class="form-label small fw-semibold">
                            <i class="fa fa-calendar text-primary me-1"></i> From
                        </label>
                        <input type="date" class="form-control" name="f_date" value="{{ request('f_date', date('Y-m-01')) }}">
                    </div>

                    <div class="col-md-4" id="by_date2">
                        <label class="form-label small fw-semibold">
                            <i class="fa fa-calendar-check text-primary me-1"></i> To
                        </label>
                        <input type="date" class="form-control" name="t_date" value="{{ request('t_date', date('Y-m-d')) }}">
                    </div>

                    <div class="col-md-2">
                        <label class="form-label small fw-semibold">
                            <i class="fa fa-money-bill text-primary me-1"></i> Min
                        </label>
                        <input type="number" step="0.01" class="form-control" name="min_amount" value="{{ request('min_amount') }}">
                    </div>

                    <div class="col-md-2">
                        <label class="form-label small fw-semibold">
                            <i class="fa fa-money-bill-wave text-primary me-1"></i> Max
                        </label>
                        <input type="number" step="0.01" class="form-control" name="max_amount" value="{{ request('max_amount') }}">
                    </div>

                </div>

                <div class="d-flex justify-content-end gap-2 mt-3 flex-wrap">
                    <a href="{{ route('customer_recieved.index') }}" class="btn btn-light btn-rounded">
                        <i class="fa fa-rotate-left me-1"></i> Reset
                    </a>
                    <button type="submit" class="btn btn-primary btn-rounded">
                        <i class="fa fa-magnifying-glass me-1"></i> Apply
                    </button>
                </div>
            </form>
        </div>
    </div>

    {{-- ✅ TABLE --}}
    <div class="card card-soft">
        <div class="card-body p-4">
            <div class="table-responsive">
                <table class="table table-striped align-middle" id="customer_received">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Title</th>
                            <th>Customer</th>
                            <th>R-Number</th>
                            <th>Date</th>
                            <th>Received</th>
                            <th class="text-center">Action</th>
                        </tr>
                    </thead>

                    <tbody>
                        @forelse ($data as $row)
                            <tr>
                                <td>{{ $loop->iteration }}</td>
                                <td class="fw-semibold">{{ $row->title }}</td>
                                <td>{{ $row->customer->name ?? '-' }}</td>
                                <td><span class="pill"><i class="fa fa-hashtag"></i> {{ $row->recieved_number }}</span></td>
                                <td>{{ $row->date }}</td>
                                <td class="fw-bold">
                                    {{ number_format($row->amount ?? 0, 2) }}
                                    {{ $row->currency->title_en ?? '' }}
                                </td>

                                <td class="text-center">
                                    <a class="action-btn" title="Edit" href="{{ route('customer_recieved.edit', $row->id) }}">
                                        <i class="fa fa-pencil text-primary"></i>
                                    </a>

                                    {{-- show single receipt --}}
                                    <a class="action-btn" title="View" href="{{ route('customer_recieved.show', $row->id) }}">
                                        <i class="fa fa-eye text-primary"></i>
                                    </a>

                                    {{-- receipt print --}}
                                    <a class="action-btn" title="Receipt" href="{{ route('customer_recieved.recipt', $row->id) }}">
                                        <i class="fa fa-print text-success"></i>
                                    </a>

                                    <a class="action-btn" title="Delete"
                                       href="{{ route('customer_recieved.delete', $row->id) }}"
                                       onclick="return confirm('Are you sure you want to delete this item?')">
                                        <i class="fa fa-trash text-danger"></i>
                                    </a>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="text-center text-muted py-4">
                                    <i class="fa fa-box-open me-1"></i> No data found
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>

                {{ $data->links('pagination::bootstrap-4') }}
            </div>
        </div>
    </div>

</main>
@endsection

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

    // Toggle filter card
    $("#toggleFilter").on("click", function(){
        $("#filterCard").slideToggle(180);
    });

    // Init select2 if available
    if ($.fn.select2) {
        $('.select2').select2({ width:'resolve', allowClear:true, placeholder:"Search..." });
    }

    // Toggle fields
    function toggleFilterFields(){
        var type = $("#type_id").val();
        if (type == 1) {
            $("#by_invoice_number").show();
            $("#by_title").hide();
            $("#by_date, #by_date2").hide();
        } else if (type == 2) {
            $("#by_invoice_number").hide();
            $("#by_title").show();
            $("#by_date, #by_date2").hide();
        } else {
            $("#by_invoice_number").hide();
            $("#by_title").hide();
            $("#by_date, #by_date2").show();
        }
    }
    $("#type_id").on("change", toggleFilterFields);
    toggleFilterFields();

    // Auto-open filter when any filter exists
    const hasFilter =
        "{{ request()->hasAny(['type_id','number','title','f_date','t_date','customer_id','currency_id','status','min_amount','max_amount']) ? 1 : 0 }}";
    if (hasFilter == 1) $("#filterCard").show();
</script>
@endsection