@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="department_id" class="form-label fw-semibold">Department <span class="text-danger">*</span></label>
                                <select name="department_id" id="department_id" class="form-select form-select-lg rounded-2 modalselect2 input">
                                    <option value=""> -- Select -- </option>
                                    @foreach ($departments as $item)
                                        <option value="{{ $item?->id }}">{{ $item?->name }}</option>
                                    @endforeach
                                </select>
                                <small class="text-danger errors"></small>
                            </div>



                    {{-- Status Radios --}}
                    <div class="mb-4">
                        <label class="form-label fw-semibold d-block">Status <span class="text-danger">*</span></label>
                        <div class="btn-group w-100" role="group" aria-label="Status">
                            <input type="radio" class="btn-check" name="status" id="status_enabled" value="enabled" autocomplete="off" required>
                            <label class="btn btn-outline-success rounded-start" for="status_enabled">
                                <i class="ti ti-check me-1"></i> Enabled
                            </label>

                            <input type="radio" class="btn-check" name="status" id="status_disabled" value="disabled" autocomplete="off">
                            <label class="btn btn-outline-danger rounded-end" for="status_disabled">
                                <i class="ti ti-x me-1"></i> Disabled
                            </label>
                        </div>
                           <small class="text-danger errors"></small>
                    </div>

                    {{-- 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">Department</th>
                                <th class="text-muted">Status</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