@extends('layouts.master')
@section('title', $title)

@section('content')
<div class="main-body">
    <div class="page-wrapper">
     @include('structure.structure_menu')

<div class="row">
    {{-- Form Section --}}
    <div class="col-md-4">
        <div class="card border-0 shadow-sm rounded-3">
            <div class="card-header bg-light border-0">
                <h5 class="mb-0 text-primary fw-bold">
                    <i class="ti ti-plus me-2"></i> <span id="form_operation_type">Create</span> {{ $title }}
                </h5>
            </div>
            <div class="card-body">
                <form class="needs-validation" novalidate id="form"
                      data-action="{{ route($route . '.create') }}" method="post" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="id" id="id">

                    {{-- Name Field --}}
                    <div class="mb-4">
                        <label for="name" class="form-label fw-semibold">Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control form-control-lg rounded-2 input" 
                               name="name" id="name" placeholder="Enter name" required>
                        <small class="text-danger errors"></small>
                    </div>

                    <div class="mb-4">
                        <label for="address" class="form-label fw-semibold">Address <span class="text-danger">*</span></label>
                        <input type="text" class="form-control form-control-lg rounded-2 input" 
                               name="address" id="address" placeholder="Enter address" required>
                        <small class="text-danger errors"></small>
                    </div>

                    <div class="mb-4">
                        <label for="contact" class="form-label fw-semibold">Contact <span class="text-danger">*</span></label>
                        <input type="number" class="form-control form-control-lg rounded-2 input" 
                               name="contact" id="contact" placeholder="Enter contact" required>
                        <small class="text-danger errors"></small>
                    </div>

                    {{-- Status Radios --}}
                   

                    {{-- Buttons --}}
                    <div class="d-flex justify-content-between">
                        <button type="reset" class="btn btn-light border">
                            <i class="fas fa-undo"></i> Reset
                        </button>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-check me-1"></i>
                            <span id="spinners" class="d-none">
                                <i class="fa-solid fa-spinner fa-spin"></i>
                            </span>
                            Save
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Table Section --}}
    <div class="col-md-8">
        <div class="card border-0 shadow-sm rounded-3">
            <div class="card-header bg-light border-0 d-flex justify-content-between align-items-center">
                <h5 class="mb-0 text-secondary fw-bold">
                    <i class="ti ti-list-details me-2"></i> {{ $title }} List
                </h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table id="table" 
                           class="table table-hover table-striped align-middle text-nowrap mb-0">
                        <thead class="table-light">
                            <tr>
                                <th class="text-muted">#</th>
                                <th class="text-muted">Name</th>
                                <th class="text-muted">Address</th>
                                <th class="text-muted">Contact</th>
                                <th class="text-muted">{{ __('messages.action') }}</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

    </div>
</div>
@endsection

@section('page_js')
<script>
    // Datatable
    $("#table").DataTable({
        ajax: {
            method: "POST",
            data: { "_token": "{{ csrf_token() }}" },
            url: '{{ route($route . '.data') }}',
            dataSrc: ""
        },
    });

    // Form submit
    $("#form").on("submit", async function(e) {
        e.preventDefault()
        let data = objectifyForm($(this).serializeArray())
        let btn = $(this).find("button[type='submit']")
        btn.prop("disabled", true)
        $("#spinners").removeClass("d-none")

        let res = await client($(this), '{{ route($route . '.create') }}', 'post', data)

        $("#spinners").addClass("d-none")
        btn.prop("disabled", false)

        if (res && res.status == 200) {
            $("#table").DataTable().ajax.reload()
            Swal.fire({
                text: res.data,
                icon: "success",
                confirmButtonText: "Ok, got it!",
                customClass: { confirmButton: "btn btn-primary" },
            });
            resetForm()
        }
    })

    // Reset form for new entry
    function resetForm() {
        $("#form")[0].reset()
        $("#id").val("")
        $("#form_operation_type").text("Create")
    }
</script>
@endsection