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

@section('content')
<div class="main-body">
    <div class="page-wrapper">
        <div class="row">
       @include('patients.service_menu')
            {{-- 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 
                              data-action="{{ route($route . '.create') }}" 
                              method="post" 
                              enctype="multipart/form-data" 
                              id="form">
                            @csrf
                            <input type="hidden" name="id" id="id">

                          <div class="mb-4">
                            <label for="name" class="form-label">Name<span>*</span></label>
                            <input type="text" class="form-control input" name="name" id="name" required>
                            <small class="text-danger errors"></small>
                        </div>




                    <div class="mb-4">
                        <label for="category" class="form-label"> Service Category <span>*</span></label>
                        <select name="category" id="category" class="form-control modalselect2 input">
                            <option value=""> -- Select -- </option>
                            @foreach ($categories as $item)
                                
                            <option value="{{$item?->id}}">{{$item?->name}}</option>
                            @endforeach
                        </select>
                        <small class="text-danger errors"></small>
                    </div>


                    
                    
                    <div class="mb-4">
                        <label for="price" class="form-label">Price<span>*</span></label>
                        <input type="text" class="form-control input" name="price" id="price" required>
                        <small class="text-danger errors"></small>
                    </div>


            
                        <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">Category</th>
                                        <th class="text-muted">Name</th>
                                        <th class="text-muted">Price</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