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

@section('content')
<div class="main-body py-4">
    <div class="page-wrapper container-fluid">
        <div class="row g-4">

            {{-- Sidebar Menu --}}
            @include('inventory.inventory_menu')

            {{-- Form Section --}}
            <div class="col-lg-4 col-md-5">
                <div class="card border-0 shadow-lg rounded-4 h-100">
                    <div class="card-header bg-white border-0 py-3 d-flex align-items-center">
                        <div class="d-flex align-items-center">
                            <div class="rounded-circle bg-primary-subtle p-2 me-2">
                                <i class="ti ti-plus text-primary"></i>
                            </div>
                            <h5 class="mb-0 fw-bold text-primary">
                                <span id="form_operation_type">Create</span> {{ $title }}
                            </h5>
                        </div>
                    </div>

                    <div class="card-body pt-2">
                        <form class="needs-validation" novalidate
                              data-action="{{ route($route . '.create') }}"
                              method="post"
                              enctype="multipart/form-data"
                              id="form">
                            @csrf
                            <input type="hidden" name="id" id="id">

                            {{-- Name --}}
                            <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-3 shadow-sm input"
                                       name="name" id="name" placeholder="Enter name" required>
                                <small class="text-danger errors"></small>
                            </div>

                            {{-- Manager --}}
                            <div class="mb-4">
                                <label for="manager" class="form-label fw-semibold">Manager <span class="text-danger">*</span></label>
                                <select name="manager" id="manager" class="form-select shadow-sm modalselect2 input">
                                    <option value="">-- Select --</option>
                                    @foreach ($users as $item)
                                        <option value="{{ $item->id }}">{{ $item->name }}</option>
                                    @endforeach
                                </select>
                                <small class="text-danger errors"></small>
                            </div>

                            {{-- Users --}}
                            <div class="mb-4">
                                <label for="users" class="form-label fw-semibold">Users <span class="text-danger">*</span></label>
                                <select name="users[]" id="users" class="form-select shadow-sm modalselect2 input" multiple>
                                    <option value="">Select</option>
                                    @foreach ($users as $item)
                                        <option value="{{ $item->id }}">{{ $item->name }}</option>
                                    @endforeach
                                </select>
                                <small class="text-danger errors"></small>
                            </div>

                            {{-- Status --}}
                            <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 fw-semibold" 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 fw-semibold" 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-end gap-2 mt-4">
                                <button type="reset" class="btn btn-outline-secondary px-4 rounded-3">
                                    <i class="fas fa-undo me-1"></i> Reset
                                </button>
                                <button type="submit" class="btn btn-primary px-4 rounded-3">
                                    <span id="spinners" class="d-none">
                                        <i class="fa-solid fa-spinner fa-spin me-1"></i>
                                    </span>
                                    <i class="fas fa-save me-1"></i> Save
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            {{-- Table Section --}}
            <div class="col-lg-8 col-md-7">
                <div class="card border-0 shadow-lg rounded-4">
                    <div class="card-header bg-white border-0 py-3 d-flex justify-content-between align-items-center">
                        <div class="d-flex align-items-center">
                            <div class="rounded-circle bg-secondary-subtle p-2 me-2">
                                <i class="ti ti-list-details text-secondary"></i>
                            </div>
                            <h5 class="mb-0 fw-bold text-secondary">{{ $title }} List</h5>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="table"
                                   class="table table-hover align-middle table-striped text-nowrap mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th class="text-muted small">#</th>
                                        <th class="text-muted small">Name</th>
                                        <th class="text-muted small">Users</th>
                                        <th class="text-muted small">Status</th>
                                        <th class="text-muted small">{{ __('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