@extends('backend.layouts.app')

@section('title', $title)

@section('content')
    <div class="app-content-header">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-6"><h3 class="mb-0">{{ ucwords($title) }}</h3></div>
            </div>
        </div>
    </div>
    <div class="app-content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12 col-sm-12 col-md-12">
                    <div class="card card-info card-outline mb-4">
                        <form class="needs-validation" novalidate method="POST" enctype="multipart/form-data"
                              id="productServiceAdd">
                            @csrf
                            <input type="hidden" id="productServiceId" name="id"/>
                            <div class="card-body">
                                <div class="row g-3">
                                    <div class="col-md-12">
                                        <label for="title" class="form-label">Service title</label>
                                        <input
                                            type="text"
                                            class="form-control form-control-sm"
                                            id="title"
                                            name="title"
                                            required
                                        />
                                        <div class="valid-feedback">Looks good!</div>
                                    </div>

                                    <div class="col-md-12">
                                        <span class="input-group-text">Description</span>
                                        <textarea class="form-control" id="description" name="description"
                                                  required></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer">
                                <button class="btn btn-info float-end" type="submit">Save</button>
                            </div>
                            <!-- Loader Overlay -->
                            <div class="card-overlay" id="addLoader">
                                <div class="spinner-border text-success" role="status">
                                    <span class="visually-hidden">Loading...</span>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="card mb-4">
                        <div class="card-body" style="overflow: auto;">
                            {{ $dataTable->table() }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <x-update-confirmation-modal
        message="Are you sure you want to update this product service?"
    />
    <x-delete-confirmation-modal
        message="Are you sure you want to delete this product service? This action cannot be undone."
    />
@endsection

@push('scripts')
    <script>
        const productServiceStoreRoute = "{{ route('product_service.store') }}";
    </script>
    <script src="{{ asset('js/settings/setting.js') }}"></script>
    <script src="{{ asset('js/settings/product_service.js') }}"></script>
    {{--    {{ $dataTable->scripts(attributes: ['type' => 'module']) }}--}}
    <script type="module">$(function () {
            window.LaravelDataTables = window.LaravelDataTables || {};
            window.LaravelDataTables["product-services-table"] = $("#product-services-table").DataTable({
                "serverSide": true,
                "processing": true,
                "ajax": {
                    "url": "{{route('product_service.index')}}", "type": "GET", "data": function (data) {
                        for (var i = 0, len = data.columns.length; i < len; i++) {
                            if (!data.columns[i].search.value) delete data.columns[i].search;
                            if (data.columns[i].searchable === true) delete data.columns[i].searchable;
                            if (data.columns[i].orderable === true) delete data.columns[i].orderable;
                            if (data.columns[i].data === data.columns[i].name) delete data.columns[i].name;
                        }
                        delete data.search.regex;
                    }
                },
                "columns": [{
                    "data": "#",
                    "name": "#",
                    "title": "#",
                    "orderable": true,
                    "searchable": true
                }, {
                    "data": "title",
                    "name": "title",
                    "title": "Title",
                    "orderable": true,
                    "searchable": true
                }, {
                    "data": "description",
                    "name": "description",
                    "title": "Description",
                    "orderable": true,
                    "searchable": true
                }, {
                    "data": "action",
                    "name": "action",
                    "title": "Action",
                    "orderable": false,
                    "searchable": false,
                    "width": 60,
                    "className": "text-center"
                }],
                "order": [[1, "desc"]],
                "select": {"style": "single"},
                "buttons": [{"extend": "excel"}, {"extend": "csv"}, {"extend": "pdf"}, {"extend": "print"}]
            });
        });</script>

@endpush

@push('styles')
    <link rel="stylesheet" href="{{ asset('css/datatables-custom.css') }}"/>
@endpush