@extends('master.app')
@section('title', 'Edit Received')

@section('pageCSS')
<style>
    :root{
        --radius: 18px;
        --shadow: 0 14px 34px rgba(2, 6, 23, .08);
        --muted: #6b7280;
        --line: #e5e7eb;
    }

    .card-soft{
        border: 0;
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        overflow: hidden;
    }

    .hero{
        background: linear-gradient(135deg, #0d6efd, #4f46e5);
        color:#fff;
        position: relative;
    }
    .hero:before{
        content:"";
        position:absolute;
        width:320px;height:320px;border-radius:999px;
        background: rgba(255,255,255,.14);
        top:-120px; right:-120px;
        pointer-events:none;
    }
    .hero .inner{ position: relative; z-index: 2; }

    .pill{
        padding:.35rem .75rem;
        border-radius: 999px;
        background: rgba(255,255,255,.16);
        border: 1px solid rgba(255,255,255,.22);
        display:inline-flex;
        gap:.45rem;
        align-items:center;
        font-size:.9rem;
        white-space: nowrap;
    }

    .fade-in{ animation: fadeIn .25s ease-in-out; }
    @keyframes fadeIn{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)} }

    /* fields */
    .field label.form-label{
        font-size:.85rem;
        color:#111827;
        margin-bottom:.35rem;
        display:flex;
        align-items:center;
        gap:.45rem;
    }
    .field .form-control,
    .field .select2-container--default .select2-selection--single{
        height: 44px !important;
        border-radius: 12px !important;
    }

    /* select2 alignment */
    .select2-container--default .select2-selection--single{
        display:flex !important;
        align-items:center !important;
        border: 1px solid #d1d5db !important;
    }
    .select2-container--default .select2-selection--single .select2-selection__rendered{
        line-height: 44px !important;
        padding-left: 12px !important;
        padding-right: 34px !important;
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow{
        height: 44px !important;
        right: 8px !important;
    }

    textarea.form-control{
        border-radius: 12px !important;
    }

    .divider{
        height:1px;
        background: var(--line);
        margin: 14px 0;
    }

    .btn-rounded{ border-radius: 999px; }
    .btn-soft{
        background: rgba(2, 132, 199, .10);
        color:#0369a1;
        border:0;
    }
    .btn-soft:hover{ background: rgba(2, 132, 199, .16); }

    .hint{ font-size:.82rem; color: var(--muted); }
</style>
@endsection

@section('body')
<main class="app-content fade-in">
    @include('general.valert')

    {{-- HEADER --}}
    <div class="card-soft mb-3">
        <div class="hero p-4">
            <div class="inner d-flex flex-wrap align-items-center justify-content-between gap-3">
                <div>
                    <h4 class="mb-1 fw-bold">
                        <i class="fas fa-pen-to-square me-1"></i> Edit Received
                    </h4>
                    <div class="text-white-50 small">
                        Update customer received voucher safely (audit friendly)
                    </div>
                </div>

                <div class="d-flex flex-wrap gap-2">
                    <span class="pill">
                        <i class="fas fa-hashtag"></i>
                        <span id="numPreview">{{ $data->recieved_number }}</span>
                    </span>
                    <span class="pill">
                        <i class="fas fa-user"></i>
                        {{ optional($data->customer)->name ?? 'Customer' }}
                    </span>
                    <a href="{{ route('customer_recieved.index') }}" class="btn btn-light btn-sm btn-rounded px-3">
                        <i class="fas fa-arrow-left me-1"></i> Back
                    </a>
                </div>
            </div>
        </div>

        <div class="bg-white p-4">
            <form action="{{ route('customer_recieved.update', $data->id) }}" method="POST" enctype="multipart/form-data" id="receivedEditForm">
                @csrf
                @method('PUT')

                <div class="row g-3">

                    <div class="col-md-3 field">
                        <label class="form-label"><i class="fas fa-hashtag"></i> Received Number</label>
                        <input type="number" name="invoice_number" value="{{ $data->recieved_number }}"
                               id="invoice_number" class="form-control" required />
                        <div class="hint mt-1">Unique voucher number</div>
                    </div>

                    <div class="col-md-3 field">
                        <label class="form-label"><i class="fas fa-money-bill-wave"></i> Amount</label>
                        <input type="number" step="0.01" name="amount" value="{{ $data->amount }}"
                               id="amount" class="form-control" required />
                        <div class="hint mt-1">Numbers only</div>
                    </div>

                    <div class="col-md-6 field">
                        <label class="form-label"><i class="fas fa-user"></i> Customer</label>
                        <select id="customer_id" name="customer_id" class="select2 form-control" required style="width:100%;">
                            <option value="">Choose Customer</option>
                            @foreach ($customers as $row)
                                <option value="{{ $row->id }}" @selected($row->id == $data->customer_id)>
                                    {{ $row->name }}
                                </option>
                            @endforeach
                        </select>
                        <div class="hint mt-1">Search by name / phone</div>
                    </div>

                    <div class="col-md-4 field">
                        <label class="form-label"><i class="fas fa-coins"></i> Currency</label>
                        <select id="currency_id" name="currency_id" class="select2 form-control" required style="width:100%;">
                            <option value="">Choose Currency</option>
                            @foreach ($currencies as $row)
                                <option value="{{ $row->id }}" @selected($row->id == $data->currency_id)>
                                    {{ $row->title_en }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-4 field" id="ex_rate_text_box" style="display:none;">
                        <label class="form-label"><i class="fas fa-exchange-alt"></i> Exchange Rate</label>
                        <input type="text" name="ex_rate" value="{{ $data->ex_rate }}" id="ex_rate" class="form-control" />
                        <div class="hint mt-1">Auto-fill based on currency</div>
                    </div>

                    <div class="col-md-4 field">
                        <label class="form-label"><i class="fas fa-calendar"></i> Date</label>
                        @if ($bdate == 1)
                            <input type="text" required dir="rtl" name="date" value="{{ $data->date }}"
                                   class="form-control sample-date-picker" />
                        @else
                            <input type="date" required name="date" value="{{ $data->date }}"
                                   class="form-control" />
                        @endif
                    </div>

                    <div class="col-md-6 field">
                        <label class="form-label"><i class="fas fa-pen"></i> Title</label>
                        <input type="text" name="title" value="{{ $data->title }}" id="title" class="form-control" required />
                        <div class="hint mt-1">Short description (e.g. Payment for invoice #...)</div>
                    </div>

                    <div class="col-md-3 field">
                        <label class="form-label"><i class="fas fa-right-left"></i> Transaction</label>
                        <select name="transaction_id" id="transaction_id" class="form-control" required>
                            <option value="">Define Transaction</option>
                            <option value="1" @selected($data->transaction_id == 1)>By Cash</option>
                            <option value="2" @selected($data->transaction_id == 2)>By Bank</option>
                            <option value="3" @selected($data->transaction_id == 3)>By Sarafi</option>
                            <option value="4" @selected($data->transaction_id == 4)>By Token</option>
                        </select>
                    </div>

                    <div class="col-md-3 field">
                        <label class="form-label"><i class="fas fa-bullseye"></i> Cash Target</label>
                        <select name="cash_id" id="cash_id" class="form-control" required>
                            <option value="">Define Cash Target</option>
                            <option value="1" @selected($data->c_target == 1)>Target Cash Yes</option>
                            <option value="2" @selected($data->c_target == 2 || $data->c_target == null)>Target Cash NO</option>
                        </select>
                    </div>

                    <div class="col-12 field">
                        <label class="form-label"><i class="fas fa-align-left"></i> Details</label>
                        <textarea name="details" id="details" cols="30" rows="4" class="form-control" required>{{ $data->details }}</textarea>
                        <div class="hint mt-1">Add note for audit (optional but recommended)</div>
                    </div>
                </div>

                <div class="divider"></div>

                <div class="d-flex justify-content-end gap-2">
                    <a href="{{ route('customer_recieved.index') }}" class="btn btn-soft btn-rounded px-4">
                        <i class="fas fa-xmark me-1"></i> Cancel
                    </a>
                    <button type="submit" class="btn btn-primary btn-rounded px-4" id="saveBtn">
                        <i class="fas fa-save me-1"></i> Update
                    </button>
                </div>
            </form>
        </div>
    </div>
</main>
@endsection

@section('pageJs')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    $(".app-menu").removeClass("active");
    $("#nav_salei").addClass("active");
    $("#salei").addClass("is-expanded");
    $("#customer_recieved").addClass("active");

    // Select2
    $('.select2').select2({
        placeholder: "Search...",
        allowClear: true,
        width: 'resolve'
    });

    // Show/Hide exchange rate (and fetch if you want)
    function toggleExRate() {
        const cid = $("#currency_id").val();
        if (cid && cid != 1) $("#ex_rate_text_box").show();
        else $("#ex_rate_text_box").hide();
    }

    toggleExRate();

    $("#currency_id").on("change", function() {
        toggleExRate();

        // OPTIONAL: auto fetch ex-rate (same as create page)
        $.ajax({
            url: '{{ route('get.ex_rate') }}',
            type: 'GET',
            data: { currency_id: $("#currency_id").val() },
            success: function(value){ $("#ex_rate").val(value); },
            error: function(){ /* silent */ }
        });
    });

    // Live preview
    $("#invoice_number").on("input", function(){
        $("#numPreview").text($(this).val() || '');
    });

    // Safe submit UX
    $("#receivedEditForm").on("submit", function(e){
        $("#saveBtn").prop("disabled", true).html(`Updating <i class="fas fa-spinner fa-spin ms-1"></i>`);
    });
</script>
@endsection