@extends('master.app')
@section('title', 'Create Supplier Advance')

@section('body')
<main class="app-content">
    <section>
        <div class="card shadow-sm border-0" style="border-radius:18px; overflow:hidden;">

            {{-- TOP BAR --}}
            <div class="p-3 p-md-4 border-bottom"
                 style="background:linear-gradient(135deg, rgba(25,135,84,.12), rgba(13,110,253,.06));">
                <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
                    <div>
                        <h5 class="mb-0 fw-bold">
                            <i class="fa fa-hand-holding-dollar me-1"></i> Add Supplier Advance
                        </h5>
                        <small class="text-muted">Create advance record & (optional) target cash journal</small>
                    </div>

                    <div class="d-flex gap-2">
                        <a href="{{ route('msupplier_advance.index') }}"
                           class="btn btn-sm btn-light border" style="border-radius:10px;">
                            <i class="fa fa-arrow-left me-1"></i> Back
                        </a>
                    </div>
                </div>
            </div>

            <div class="card-body p-3 p-md-4">
                @include('general.valert')

                <form action="{{ route('msupplier_advance.store') }}" method="POST" id="advanceForm">
                    @csrf

                    <div class="row g-3">

                        {{-- LEFT --}}
                        <div class="col-lg-8">
                            <div class="card border-0 shadow-sm" style="border-radius:16px;">
                                <div class="card-body p-3 p-md-4">

                                    <div class="d-flex align-items-center justify-content-between mb-2">
                                        <h6 class="mb-0 fw-bold">
                                            <i class="fa fa-info-circle me-1"></i> Advance Information
                                        </h6>
                                        <span class="badge bg-secondary">Step 1</span>
                                    </div>

                                    <div class="row g-3">
                                        <div class="col-md-4">
                                            <div class="form-outline">
                                                <input type="number" required name="invoice_number"
                                                       value="{{ old('invoice_number', $number ?? '') }}"
                                                       id="invoice_number" class="form-control" />
                                                <label class="form-label" for="invoice_number">Advance Number</label>
                                            </div>
                                        </div>

                                        <div class="col-md-8">
                                            <label class="form-label mb-1">Supplier</label>
                                            <select id="supplier_id" required name="supplier_id"
                                                    class="select2 form-control" style="width:100%;">
                                                <option value="">Choose Supplier</option>
                                                @foreach ($suppliers as $row)
                                                    <option value="{{ $row->id }}" {{ old('supplier_id')==$row->id?'selected':'' }}>
                                                        {{ $row->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="col-md-4">
                                            <div class="form-outline">
                                                <input type="number" step="0.01" required name="amount"
                                                       value="{{ old('amount') }}" id="amount"
                                                       class="form-control" />
                                                <label class="form-label" for="amount">Amount</label>
                                            </div>
                                        </div>

                                        <div class="col-md-4">
                                            <label class="form-label mb-1">Currency</label>
                                            <select id="currency_id" required name="currency_id"
                                                    class="select2 form-control" style="width:100%;">
                                                <option value="">Choose Currency</option>
                                                @foreach ($currencies as $row)
                                                    <option value="{{ $row->id }}" {{ (string)old('currency_id')===(string)$row->id?'selected':'' }}>
                                                        {{ $row->title_en }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="col-md-4" id="ex_rate_text_box" style="display:none;">
                                            <div class="form-outline">
                                                <input type="text" name="ex_rate" value="{{ old('ex_rate') }}"
                                                       id="ex_rate" class="form-control" />
                                                <label class="form-label" for="ex_rate">Exchange Rate</label>
                                            </div>
                                        </div>

                                        <div class="col-md-8">
                                            <div class="form-outline">
                                                <input type="text" required name="title"
                                                       value="{{ old('title') }}" id="title"
                                                       class="form-control" />
                                                <label class="form-label" for="title">Title</label>
                                            </div>
                                        </div>

                                        <div class="col-md-4">
                                            <label class="form-label mb-1">Target Cash</label>
                                            <select required name="cash_id" id="cash_id" class="form-select">
                                                <option value="">Define Target Option</option>
                                                <option value="1" {{ old('cash_id')==1?'selected':'' }}>Target Cash Yes</option>
                                                <option value="2" {{ old('cash_id')==2?'selected':'' }}>Target Cash No</option>
                                            </select>
                                        </div>

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

                                        <div class="col-md-12">
                                            <div class="form-outline">
                                                <textarea name="details" id="details" cols="30" rows="4"
                                                          class="form-control">{{ old('details') }}</textarea>
                                                <label class="form-label" for="details">Details</label>
                                            </div>
                                        </div>
                                    </div>

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

                        {{-- RIGHT (HELP / PREVIEW) --}}
                        <div class="col-lg-4">
                            <div class="card border-0 shadow-sm" style="border-radius:16px;">
                                <div class="card-body p-3 p-md-4">
                                    <h6 class="fw-bold mb-2">
                                        <i class="fa fa-lightbulb me-1"></i> Notes
                                    </h6>

                                    <div class="alert alert-light border small mb-3" style="border-radius:14px;">
                                        <div class="d-flex gap-2">
                                            <i class="fa fa-circle-info mt-1 text-primary"></i>
                                            <div>
                                                <div class="fw-bold">Exchange Rate</div>
                                                If currency is not default (ID=1), exchange rate will show automatically.
                                            </div>
                                        </div>
                                    </div>

                                    <div class="list-group list-group-flush small">
                                        <div class="list-group-item px-0 border-0 d-flex justify-content-between">
                                            <span class="text-muted">Default Ex Rate</span>
                                            <span class="fw-bold">1</span>
                                        </div>
                                        <div class="list-group-item px-0 d-flex justify-content-between">
                                            <span class="text-muted">Target Cash</span>
                                            <span class="fw-bold">Optional Journal</span>
                                        </div>
                                        <div class="list-group-item px-0 d-flex justify-content-between">
                                            <span class="text-muted">Status</span>
                                            <span class="fw-bold">Active</span>
                                        </div>
                                    </div>

                                    <div class="d-grid mt-4">
                                        <button type="submit" class="btn btn-success" style="border-radius:12px;">
                                            <i class="fa fa-save me-1"></i> Save Advance
                                        </button>
                                        <a href="{{ route('msupplier_advance.index') }}"
                                           class="btn btn-light border mt-2" style="border-radius:12px;">
                                            <i class="fa fa-list me-1"></i> Back to List
                                        </a>
                                    </div>

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

                    </div> {{-- row --}}
                </form>
            </div>
        </div>
    </section>
</main>
@endsection

@section('pageJs')
<script>
    $(".app-menu").removeClass("active");
    $("#nav_purchase1").addClass("active");
    $("#purchasei").addClass("is-expanded");
    $("#purchase_advances").addClass("active");

    function toggleExRateBox(){
        const cid = $("#currency_id").val();
        if (cid && cid != 1) $("#ex_rate_text_box").show();
        else $("#ex_rate_text_box").hide();
    }

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

        $.ajax({
            url: '{{ route('get.ex_rate') }}',
            type: 'GET',
            data: { currency_id: $("#currency_id").val() },
            success: function(value) {
                $("#ex_rate").val(value);
            }
        });
    });

    $(function(){
        toggleExRateBox();
    });
</script>
@endsection