@extends('layouts.layout-horizontal')

@section('title', 'Edit Price List Rate')

@section('css')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet">
<style>
    .price-list-edit .select2-container {
        width: 100% !important;
    }
</style>
@endsection

@section('content')
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0">Edit Price List Rate</h5>
        <a href="{{ route('product-price-lists.index') }}" class="btn btn-outline-secondary btn-sm">Back</a>
    </div>
    <div class="card-body">
        <form method="POST" action="{{ route('product-price-lists.update', $priceList) }}" class="row g-3 price-list-edit">
            @csrf
            @method('PUT')
            <div class="col-md-4">
                <label class="form-label">Product</label>
                <select name="product_id" class="form-select js-price-list-select" data-placeholder="Select product" required>
                    @foreach($products as $p)
                        <option value="{{ $p->id }}" @selected($priceList->product_id == $p->id)>{{ $p->product_id }} - {{ $p->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-4">
                <label class="form-label">Vendor</label>
                <select name="vendor_id" class="form-select js-price-list-select" data-placeholder="Select vendor" required>
                    @foreach($vendors as $v)
                        <option value="{{ $v->id }}" @selected($priceList->vendor_id == $v->id)>{{ $v->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label">Rate</label>
                <input type="number" step="0.01" min="0" name="rate" class="form-control text-end" value="{{ $priceList->rate }}" required>
            </div>
            <div class="col-md-3">
                <label class="form-label">Effective From</label>
                <input type="date" name="effective_from" class="form-control" value="{{ $priceList->effective_from?->format('Y-m-d') }}">
            </div>
            <div class="col-md-12">
                <label class="form-label">Remarks</label>
                <input type="text" name="remarks" class="form-control" value="{{ $priceList->remarks }}">
            </div>
            <div class="col-12">
                <button class="btn btn-primary">Update Rate</button>
            </div>
        </form>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        $('.js-price-list-select').select2({
            theme: 'bootstrap-5',
            width: 'style',
            placeholder: function() {
                return $(this).data('placeholder') || '';
            }
        });

        $('.js-price-list-select').on('select2:open', function() {
            setTimeout(function() {
                document.querySelector('.select2-container--open .select2-search__field')?.focus();
            }, 0);
        });
    });
</script>
@endsection