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

@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,.10), 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-plus-circle me-1"></i> Add Payment
                        </h5>
                        <small class="text-muted">Create a supplier payment record</small>
                    </div>

                    <div class="d-flex gap-2">
                        <a href="{{ route('msupplier_payment.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_payment.store') }}" method="post" enctype="multipart/form-data" id="payForm">
                    @csrf

                    {{-- MAIN FORM CARD --}}
                    <div class="row g-3">

                        {{-- Payment Number --}}
                        <div class="col-lg-3">
                            <label class="form-label mb-1">Payment Number</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fa fa-hashtag"></i></span>
                                <input type="number" required name="invoice_number"
                                       value="{{ $number }}" id="invoice_number"
                                       class="form-control" placeholder="e.g. 1001" />
                            </div>
                        </div>

                        {{-- Supplier --}}
                        <div class="col-lg-5">
                            <label class="form-label mb-1">Supplier</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fa fa-user-tie"></i></span>
                                <select id="supplier_id" required name="supplier_id" class="form-select select2" style="width:100%;">
                                    <option value="">Choose Supplier</option>
                                    @foreach ($suppliers as $row)
                                        <option value="{{ $row->id }}">{{ $row->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        {{-- Date --}}
                        <div class="col-lg-4">
                            <label class="form-label mb-1">Date</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fa fa-calendar"></i></span>

                                @if ($bdate == 1)
                                    <input type="text" required dir="rtl" name="date"
                                           class="form-control sample-date-picker" id="date"
                                           placeholder="Select date" />
                                @else
                                    <input type="date" required name="date" value="{{ date('Y-m-d') }}"
                                           class="form-control" id="date" />
                                @endif
                            </div>
                        </div>

                        {{-- Amount --}}
                        <div class="col-lg-4">
                            <label class="form-label mb-1">Amount</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fa fa-money"></i></span>
                                <input type="number" required name="amount" id="amount"
                                       class="form-control" placeholder="0" step="0.01" min="0" />
                            </div>
                        </div>

                        {{-- Currency --}}
                        <div class="col-lg-4">
                            <label class="form-label mb-1">Currency</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fa fa-coins"></i></span>
                                <select id="currency_id" required name="currency_id" class="form-select select2" style="width:100%;">
                                    <option value="">Choose Currency</option>
                                    @foreach ($currencies as $row)
                                        <option value="{{ $row->id }}">{{ $row->title_en }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        {{-- Exchange Rate --}}
                        <div class="col-lg-4" id="ex_rate_text_box" style="display:none;">
                            <label class="form-label mb-1">Exchange Rate</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fa fa-exchange"></i></span>
                                <input type="text" name="ex_rate" value="" id="ex_rate" class="form-control" placeholder="e.g. 90" />
                            </div>
                            <small class="text-muted">Only for non-default currency</small>
                        </div>

                        {{-- Title --}}
                        <div class="col-lg-8">
                            <label class="form-label mb-1">Title</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fa fa-receipt"></i></span>
                                <input type="text" required name="title" id="title"
                                       class="form-control" placeholder="Payment title..." />
                            </div>
                        </div>

                        {{-- Target Cash --}}
                        <div class="col-lg-4">
                            <label class="form-label mb-1">Target Cash</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fa fa-cash-register"></i></span>
                                <select required name="cash_id" id="cash_id" class="form-select">
                                    <option value="">Define Target Option</option>
                                    <option value="1">Target Cash Yes</option>
                                    <option value="2">Target Cash No</option>
                                </select>
                            </div>
                        </div>

                        {{-- Details --}}
                        <div class="col-12">
                            <label class="form-label mb-1">Details</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fa fa-align-left"></i></span>
                                <textarea name="details" id="details" rows="4" class="form-control"
                                          placeholder="Write details here..."></textarea>
                            </div>
                        </div>

                    </div>

                    {{-- ACTIONS --}}
                    <div class="d-flex flex-wrap justify-content-end gap-2 mt-4">
                        <a href="{{ route('msupplier_payment.index') }}"
                           class="btn btn-light border" style="border-radius:10px;">
                            <i class="fa fa-times me-1"></i> Cancel
                        </a>

                        <button type="submit" class="btn btn-primary" style="border-radius:10px;">
                            <i class="fa fa-save me-1"></i> Save Payment
                        </button>
                    </div>

                </form>
            </div>

        </div>
    </section>
</main>
@endsection

@section('pageJs')
<script type="text/javascript">
    $(".app-menu").removeClass("active");
    $("#nav_purchase1").addClass("active");
    $("#purchasei").addClass("is-expanded");
    $("#purchase_payments").addClass("active");

    // Currency -> exchange rate
    $(document).on('change', '#currency_id', function () {
        const curId = $(this).val();

        if (curId && curId != 1) {
            $("#ex_rate_text_box").show();

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

        } else {
            $("#ex_rate_text_box").hide();
            $("#ex_rate").val('');
        }
    });
</script>
@endsection