@extends('layout.app')
@section('title', 'Services | Waiting Room')

@section('content')
    <div class="row page-titles">
        <ol class="breadcrumb">
            <li class="breadcrumb-item active"><a href="{{ route('dashboard') }}">{{ __('translations.Dashboard') }}</a></li>
            <li class="breadcrumb-item"><a href="javascript:void(0)">{{ __('translations.Services') }}</a></li>
        </ol>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4 class="card-title">{{ __('translations.Services') }}</h4>
                    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addModal">{{ __('translations.Add') }}</button>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="servicesTable" class="display" style="width: 1160px !important;">
                            <thead>
                                <tr>
                                    <th>{{ __('translations.No.') }}</th>
                                    <th>{{ __('translations.Image') }}</th>
                                    <th>{{ __('translations.Name') }}</th>
                                    <th>{{ __('translations.Time') }}</th>
                                    {{-- <th>Price</th> --}}
                                    <th>{{ __('translations.Action') }}</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--Add Modal -->
    <div class="modal fade" id="addModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
        aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="staticBackdropLabel">{{ __('translations.Create Service') }}</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="createService">
                    @csrf
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-12 mt-2">
                                <label for="">{{ __('translations.Name') }}</label>
                                <input type="text" name="name" value="Consultancy Time" class="form-control" readonly>
                            </div>

                            <div class="col-md-12 mt-2">
                                <label for="">{{ __('translations.Image') }}</label>
                                <input type="file" name="image" class="form-control" required
                                    accept=".png,.jpg,.jpeg,.svg">
                            </div>
                            <div class="col-md-12 mt-2">
                                <label for="">{{ __('translations.Time') }} <small>{{ __('translations.(in minutes)') }}</small></label>
                                <input type="text" onkeypress="return isNumberKey(event)" name="time"
                                    class="form-control" required>
                            </div>
                            {{-- <div class="col-md-12 mt-2">
                                <label for="">Price</label>
                                <input type="text" onkeypress="return isNumberKey(event)" name="price"
                                    class="form-control" required>
                            </div> --}}
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">{{ __('translations.Close') }}</button>
                        <button id="submitAddForm" type="submit" class="btn btn-primary">{{ __('translations.Submit') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!--Edit Modal -->
    <div class="modal fade" id="editModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
        aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="staticBackdropLabel">{{ __('translations.Edit Service') }}</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="editService">
                    @csrf
                    <input type="hidden" name="service_id" id="editServiceId">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-12 mt-2">
                                <label for="">{{ __('translations.Name') }}</label>
                                <input type="text" name="name" id="name" class="form-control" readonly>
                            </div>

                            <div class="col-md-12 mt-2">
                                <label for="">{{ __('translations.Image') }}</label>
                                <input type="file" name="image" class="form-control" accept=".png,.jpg,.jpeg,.svg">
                            </div>
                            <div class="col-md-12 mt-2">
                                <label for="">{{ __('translations.Time') }}</label>
                                <input type="text" name="time"onkeypress="return isNumberKey(event)" id="time"
                                    class="form-control" required>
                            </div>
                            {{-- <div class="col-md-12 mt-2">
                                <label for="">Price</label>
                                <input type="text" onkeypress="return isNumberKey(event)" name="price"
                                    id="price" class="form-control" required>
                            </div> --}}
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">{{ __('translations.Close') }}</button>
                        <button id="submitEditForm" type="submit" class="btn btn-primary">{{ __('translations.Submit') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!--Delete Modal -->
    <div class="modal fade" id="deleteModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
        aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="staticBackdropLabel">{{ __('translations.Delete Service') }}</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="deleteService">
                    @csrf
                    <input type="hidden" name="id" id="deleteServiceId">
                    <div class="modal-body">
                        {{ __('translations.Are you sure you want to delete this record?') }}
                    </div>
                    <div class="modal-footer">

                        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">{{ __('translations.Close') }}</button>
                        <button id="submitDelForm" type="submit" class="btn btn-danger">{{ __('translations.Delete') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('custom-script')
    <script>
        function isNumberKey(evt) {
            var charCode = (evt.which) ? evt.which : evt.keyCode
            if (charCode > 31 && (charCode < 48 || charCode > 57))
                return false;
            return true;
        }

        // Data Table
        $(document).ready(function() {
            let table = $('#servicesTable').DataTable({
                "processing": true,
                "serverSide": true,
                "paging": true,
                "bPaginate": true,
                "pageLength": 10,
                "bLengthChange": false,
                "lengthMenu": [
                    [5, 10, 20, 50],
                    ['5', '10', '20', '50']
                ],
                "ajax": {
                    "url": "{{ route('get.services') }}",
                    "type": "POST",
                    data: {
                        "_token": "{{ csrf_token() }}",
                    }
                },
                'columns': [
                    // {data: 'checkbox', orderable: false},
                    {
                        data: 'id',
                        orderable: false
                    },
                    {
                        data: 'image',
                        orderable: false
                    },
                    {
                        data: 'name',
                        orderable: false
                    },
                    {
                        data: 'time',
                        orderable: false
                    },
                    // {
                    //   data: 'price',
                    //  orderable: false
                    //},
                    {
                        data: 'action',
                        orderable: false
                    },
                ],
                language: {
                    paginate: {
                        next: '<i class="fa fa-angle-double-right" aria-hidden="true"></i>',
                        previous: '<i class="fa fa-angle-double-left" aria-hidden="true"></i>'
                    }
                }
            });
        });


        $("#createService").on('submit', function(e) {
            e.preventDefault();
            const btn = $("#submitAddForm");
            const modal = $('#addModal');
            let formData = new FormData($("#createService")[0]);
            $.ajax({
                type: "POST",
                url: "{{ route('services.create') }}",
                dataType: 'json',
                contentType: false,
                processData: false,
                cache: false,
                data: formData,
                beforeSend: function() {
                    btn.prop('disabled', true);
                    btn.html(
                        '<div class="spinner-border" role="status" style="height: 14px;width: 14px;accent-color: ;"> <span class="visually-hidden">Loading...</span> </div>'
                    );
                    $('.error-message').html('');
                },
                success: function(res) {
                    if (res.success === true) {
                        btn.prop('disabled', false);
                        btn.html('Submit');
                        modal.modal('hide');
                        notyf.success({
                            message: res.message,
                            duration: 3000
                        });
                        setTimeout(function() {
                            window.location.reload();
                        }, 2000);

                    } else {
                        btn.prop('disabled', false);
                        btn.html('Submit');
                        modal.modal('hide');
                        notyf.error({
                            message: res.message,
                            duration: 3000
                        });
                    }
                },
                error: function(e) {
                    btn.prop('disabled', false);
                    btn.html('Submit');
                }
            });
        });
        // Edit
        function editRecord(id) {
            $('#editServiceId').val(id);
            $.ajax({
                type: "GET",
                url: "{{ route('service.detail') }}",
                dataType: 'json',
                data: {
                    id: id
                },
                beforeSend: function() {
                    // Code to execute before sending the request (optional)
                },
                success: function(res) {
                    if (res.success === true) {

                        $('#name').val(res.data.name);
                        $('#portuguese_name').val(res.data.portuguese_name);
                        $('#french_name').val(res.data.french_name);
                        $('#time').val(res.data.time);
                        $('#price').val(res.data.price);
                    } else {
                        // Code to handle unsuccessful response
                        console.log(res.message); // Log error message
                    }
                },
                error: function(e) {
                    // Code to execute if the request fails
                    console.log("Error:", e);
                }
            });
        }

        $("#editService").on('submit', function(e) {
            e.preventDefault();
            const btn = $("#submitEditForm");
            const modal = $('#editModal');
            let formData = new FormData($("#editService")[0]);
            $.ajax({
                type: "POST",
                url: "{{ route('service.update') }}",
                dataType: 'json',
                contentType: false,
                processData: false,
                cache: false,
                data: formData,
                beforeSend: function() {
                    btn.prop('disabled', true);
                    btn.html(
                        '<div class="spinner-border" role="status" style="height: 14px;width: 14px;accent-color: ;"> <span class="visually-hidden">Loading...</span> </div>'
                    );
                    $('.error-message').html('');
                },
                success: function(res) {
                    if (res.success === true) {
                        btn.prop('disabled', false);
                        btn.html('Submit');
                        modal.modal('hide');
                        notyf.success({
                            message: res.message,
                            duration: 3000
                        });
                        setTimeout(function() {
                            window.location.reload();
                        }, 2000);

                    } else {
                        btn.prop('disabled', false);
                        btn.html('Submit');
                        modal.modal('hide');
                        notyf.error({
                            message: res.message,
                            duration: 3000
                        });
                    }
                },
                error: function(e) {
                    btn.prop('disabled', false);
                    btn.html('Submit');
                }
            });
        });

        function deleteRecord(id) {
            $('#deleteServiceId').val(id);
        }

        $("#deleteService").on('submit', function(e) {
            e.preventDefault();
            const btn = $("#submitDelForm");
            const modal = $('#deleteModal');
            let formData = new FormData($("#deleteService")[0]);
            $.ajax({
                type: "POST",
                url: "{{ route('service.delete') }}",
                dataType: 'json',
                contentType: false,
                processData: false,
                cache: false,
                data: formData,
                beforeSend: function() {
                    btn.prop('disabled', true);
                    btn.html(
                        '<div class="spinner-border" role="status" style="height: 14px;width: 14px;accent-color: ;"> <span class="visually-hidden">Loading...</span> </div>'
                    );
                    $('.error-message').html('');
                },
                success: function(res) {
                    if (res.success === true) {
                        btn.prop('disabled', false);
                        btn.html('Delete');
                        modal.modal('hide');
                        notyf.success({
                            message: res.message,
                            duration: 3000
                        });
                        setTimeout(function() {
                            window.location.reload();
                        }, 2000);

                    } else {
                        btn.prop('disabled', false);
                        btn.html('Delete');
                        modal.modal('hide');
                        notyf.error({
                            message: res.message,
                            duration: 3000
                        });
                    }
                },
                error: function(e) {
                    btn.prop('disabled', false);
                    btn.html('Delete');
                }
            });
        });
    </script>
@endsection