@extends('master.app')
@section('title', 'Edit 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(255,193,7,.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-pen-to-square me-1"></i> Edit Payment
                        </h5>
                        <small class="text-muted">Update supplier payment information</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.update', $data->id) }}"
                      method="post" enctype="multipart/form-data" id="payEditForm">
                    @csrf
                    @method('put')

                    <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" name="invoice_number" value="{{ $data->invoice_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" name="supplier_id" class="form-select select2" style="width:100%;">
                                    <option value="">Choose Supplier</option>
                                    @foreach ($suppliers as $row)
                                        <option value="{{ $row->id }}" {{ $row->id == $data->supplier_id ? 'selected' : '' }}>
                                            {{ $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"
                                           value="{{ $data->date }}" class="form-control sample-date-picker"
                                           id="date" placeholder="Select date" />
                                @else
                                    <input type="date" required name="date" value="{{ $data->date }}"
                                           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" name="amount" value="{{ $data->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" name="currency_id" class="form-select select2" style="width:100%;">
                                    <option value="">Choose Currency</option>
                                    @foreach ($currencies as $row)
                                        <option value="{{ $row->id }}" {{ $row->id == $data->currency_id ? 'selected' : '' }}>
                                            {{ $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="{{ $data->ex_rate }}"
                                       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" name="title" value="{{ $data->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 name="cash_id" id="cash_id" class="form-select">
                                    <option value="">Define Target Option</option>
                                    <option value="1" {{ $data->c_target == 1 ? 'selected' : '' }}>Target Cash Yes</option>
                                    <option value="2" {{ ($data->c_target == 2 || $data->c_target == null) ? 'selected' : '' }}>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...">{{ $data->details }}</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> Update 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");

    function toggleExRate(){
        const curId = $('#currency_id').val();
        if(curId && curId != 1){
            $('#ex_rate_text_box').show();
        }else{
            $('#ex_rate_text_box').hide();
            $('#ex_rate').val('');
        }
    }

    // init
    $(function(){
        toggleExRate();
    });

    // change
    $(document).on('change', '#currency_id', function(){
        toggleExRate();
    });
</script>
@endsection