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

@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);
        }

        .fade-in {
            animation: fadeIn .25s ease-in-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(8px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .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);
        }

        .field label.form-label {
            font-size: .85rem;
            color: #111827;
            margin-bottom: .35rem;
            display: flex;
            align-items: center;
            gap: .4rem;
        }

        .field .form-control,
        .field .select2-container--default .select2-selection--single {
            height: 44px !important;
            border-radius: 12px !important;
        }

        /* select2 align */
        .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;
        }

        .btn-rounded {
            border-radius: 999px;
        }

        .btn-soft {
            background: rgba(2, 132, 199, .08);
            color: #0369a1;
            border: 0;
        }

        .btn-soft:hover {
            background: rgba(2, 132, 199, .14);
        }

        .divider {
            height: 1px;
            background: #e5e7eb;
            margin: 14px 0;
        }
    </style>
@endsection

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

        @include('general.valert')

        @if ($errors->any())
            <div class="alert alert-danger">
                <ul class="mb-0">
                    @foreach ($errors->all() as $e)
                        <li>{{ $e }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form action="{{ route('customer_recieved.store') }}" method="POST" enctype="multipart/form-data" id="receivedForm">
            @csrf

            {{-- ✅ HEADER --}}
            <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 mb-3">
                        <div>
                            <h4 class="fw-bold mb-0">
                                <i class="fa fa-hand-holding-dollar text-success me-1"></i> Add Received
                            </h4>
                            <small class="text-muted">Clean • Fast • International-style form</small>
                        </div>

                        <div class="d-flex flex-wrap align-items-center gap-2">
                            <span class="pill">
                                <i class="fa fa-hashtag"></i>
                                <span id="recNoPreview">{{ old('invoice_number', $number ?? '') }}</span>
                            </span>
                            <span class="pill">
                                <i class="fa fa-user"></i>
                                <span id="cusPreview">No customer</span>
                            </span>
                            <span class="pill">
                                <i class="fa fa-coins"></i>
                                <span id="curPreview">Currency</span>
                            </span>
                        </div>
                    </div>

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

                    <div class="row g-3">

                        <div class="col-md-4 field">
                            <label class="form-label">
                                <i class="fa fa-hashtag text-primary"></i> Received Number
                            </label>
                            <input type="number" required name="invoice_number"
                                   value="{{ old('invoice_number', $number ?? '') }}"
                                   id="invoice_number" class="form-control" />
                            <div class="muted-hint mt-1">Auto number generated</div>
                        </div>

                        <div class="col-md-4 field">
                            <label class="form-label">
                                <i class="fa fa-money-bill-wave text-primary"></i> Amount
                            </label>
                            {{-- ✅ FIXED: your old code had date value in amount --}}
                            <input type="number" step="0.01" required name="amount"
                                   value="{{ old('amount') }}"
                                   id="amount" class="form-control" placeholder="0.00" />
                        </div>

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

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

                        <div class="col-md-6 field">
                            <label class="form-label">
                                <i class="fa fa-pen text-primary"></i> Title
                            </label>
                            <input type="text" name="title" required value="{{ old('title') }}" id="title" class="form-control" />
                        </div>

                        <div class="col-md-4 field">
                            <label class="form-label">
                                <i class="fa fa-coins text-primary"></i> Currency
                            </label>
                            <select id="currency_id" name="currency_id" class="select2 form-control" style="width:100%;">
                                <option value="">Choose Currency</option>
                                @foreach ($currencies as $row)
                                    <option value="{{ $row->id }}" @selected(old('currency_id', 1) == $row->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="fa fa-exchange-alt text-primary"></i> Exchange Rate
                            </label>
                            <input type="text" name="ex_rate" value="{{ old('ex_rate') }}" id="ex_rate" class="form-control" />
                            <div class="muted-hint mt-1">Auto fetched when currency changes</div>
                        </div>

                        <div class="col-md-4 field">
                            <label class="form-label">
                                <i class="fa fa-exchange text-primary"></i> Transaction
                            </label>
                            <select name="transaction_id" required id="transaction_id" class="form-control select2" style="width:100%;">
                                <option value="">Define Transaction</option>
                                <option value="1" @selected(old('transaction_id') == 1)>By Cash</option>
                                <option value="2" @selected(old('transaction_id') == 2)>By Bank</option>
                                <option value="3" @selected(old('transaction_id') == 3)>By Sarafi</option>
                                <option value="4" @selected(old('transaction_id') == 4)>By Token</option>
                            </select>
                        </div>

                        <div class="col-md-4 field">
                            <label class="form-label">
                                <i class="fa fa-bullseye text-primary"></i> Cash Target
                            </label>
                            <select required name="cash_id" id="cash_id" class="form-control select2" style="width:100%;">
                                <option value="">Define Cash Target</option>
                                <option value="1" @selected(old('cash_id') == 1)>Target Cash Yes</option>
                                <option value="2" @selected(old('cash_id') == 2)>Target Cash No</option>
                            </select>
                        </div>

                        <div class="col-md-8 field">
                            <label class="form-label">
                                <i class="fa fa-align-left text-primary"></i> Details
                            </label>
                            <textarea name="details" required id="details" rows="3" class="form-control"
                                      style="border-radius:12px;">{{ old('details') }}</textarea>
                        </div>

                    </div>

                    <div class="d-flex justify-content-end gap-2 mt-4 flex-wrap">
                        <a href="{{ route('customer_recieved.index') }}" class="btn btn-soft btn-rounded">
                            <i class="fa fa-arrow-left me-1"></i> Back
                        </a>
                        <button type="submit" class="btn btn-success btn-rounded px-4" id="saveBtn">
                            <i class="fa fa-check me-1"></i> Save
                        </button>
                    </div>

                    <div class="muted-hint mt-3">
                        <i class="fa fa-shield-alt me-1"></i>
                        Tip: Please choose correct currency and transaction for accurate ledger & cash journal.
                    </div>

                </div>
            </div>
        </form>
    </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");

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

        // preview badges
        function refreshBadges() {
            $("#recNoPreview").text($("#invoice_number").val() || '');
            $("#cusPreview").text($("#customer_id option:selected").text() || 'No customer');
            $("#curPreview").text($("#currency_id option:selected").text() || 'Currency');
        }
        $("#invoice_number, #customer_id, #currency_id").on("change input", refreshBadges);
        refreshBadges();

        // currency exchange rate
        function toggleExRateBox() {
            if ($("#currency_id").val() && $("#currency_id").val() != 1) {
                $("#ex_rate_text_box").show();
            } else {
                $("#ex_rate_text_box").hide();
                $("#ex_rate").val('');
            }
        }

        $("#currency_id").change(function() {
            toggleExRateBox();

            // fetch ex rate
            $.ajax({
                url: '{{ route('get.ex_rate') }}',
                type: 'GET',
                data: { 'currency_id': $("#currency_id").val() },
                success: function(value) { $("#ex_rate").val(value); },
                error: function() { Swal.fire("Warning", "Error occurred!", "error"); }
            });
        });

        // on load
        toggleExRateBox();

        // prevent double submit
        $("#receivedForm").on("submit", function() {
            $("#saveBtn").prop("disabled", true).html('Saving <i class="fa fa-spinner fa-spin ms-1"></i>');
        });
    </script>
@endsection