@extends('admin.layouts.layout')

@section('content')
    <div class="page-container">

        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header border-bottom border-dashed d-flex align-items-center">
                        <h4 class="header-title">Edit Setting</h4>
                    </div>

                    <div class="card-body">
                        <form action="{{ route('settings.update', $setting->id) }}" method="POST" id="settingform">
                            @csrf
                            @method('PUT')
                            <div class="row">
                                <div class="col-lg-6 mb-3">
                                    <label for="name" class="form-label">Document</label>
                                    <select class="form-control" name="document_id" id="document_id">
                                        <option value="">Select Document</option>
                                        @foreach ($NatureOfDocuments as $NatureOfDocument)
                                            <option value="{{ $NatureOfDocument->id }}"
                                                {{ $setting->document_id == $NatureOfDocument->id ? 'selected' : '' }}>
                                                {{ $NatureOfDocument->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-lg-6 mb-3">
                                    <label for="name" class="form-label">Bank</label>
                                    <select class="form-control" name="bank_id" id="bank_id">
                                        <option value="">Select Bank</option>
                                        @foreach ($Banks as $Bank)
                                            <option value="{{ $Bank->id }}"{{ $setting->bank_id == $Bank->id ? 'selected' : '' }}>{{ $Bank->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-lg-6 mb-3">
                                    <label for="name" class="form-label">Site</label>
                                    <select class="form-control" name="site_id" id="site_id">
                                        <option value="">Select Site</option>
                                        @foreach ($Sites as $Site)
                                            <option value="{{ $Site->id }}"{{ $setting->site_id == $Site->id ? 'selected' : '' }}>{{ $Site->site_name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-lg-6 mb-3">
                                    <label for="name" class="form-label">Amount</label>
                                    <input type="text" id="amount" name="amount" value="{{ $setting->amount }}"
                                        class="form-control">
                                </div>
                            </div>
                            <div>
                                <button type="submit" class="btn btn-primary">Update</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>


    </div> <!-- container -->
@endsection

@section('footer-script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>

<script>
$(document).ready(function () {

    $('.whitespace-trim').on('input', function() {
        var value = $(this).val();
        if (value && value.charAt(0) === ' ') {
            $(this).val(value.substring(1));
        }
    });

    // Initialize the form validation
     $('#settingform').validate({
            rules: {
                document_id: {
                    required: true,
                },
                site_id: {
                    required: true,
                },
                amount: {
                    required: true,
                    number: true,
                    min: 0.01
                }
            },
            messages: {
                document_id: {
                    required: "Please select a document."
                },
                site_id: {
                    required: "Please select a site."
                },
                amount: {
                    required: "Please enter an amount.",
                    number: "Amount must be a number.",
                    min: "Amount must be greater than 0."
                }
            },
            errorClass: 'text-danger',
            errorElement: 'div',
            highlight: function (element) {
                $(element).addClass('is-invalid');
            },
            unhighlight: function (element) {
                $(element).removeClass('is-invalid');
            }
        });
});
</script>

@endsection