@extends('layouts.master')

@section('title', __('frontend.service'))
@section('content_title', __('frontend.service'))
@section('content_summary', __('frontend.service_summary'))


@if (auth()->user()->can('frontend.services.create'))
    @section('content_taskbar')
        @if (auth()->user()->can('frontend.services.create'))
            <li class="nav-item">
                <a href="{{ route('frontend.services.create') }}" class="nav-link" id="add" data-bs-toggle="modal"
                    data-bs-target="#addModal">
                    <i class="nav-link-icon pe-7s-plus"></i>
                    <span>{{ __('core.add') }}</span>
                </a>
            </li>
        @endif
    @endsection
@endif

@section('main_content')
    @if (auth()->user()->hasRole('Super Admin'))
        {{-- Filter start --}}
        <div class="main-card mb-3 card">
            <div class="card-body">
                <h5 class="card-title">{{ __('core.filter') }}</h5>
                <form class="row g-3" id="filter-form" action="{{ route('roles.index') }}" method="POST">
                    @csrf
                    @if (auth()->user()->hasRole('Super Admin'))
                        <div class="col col-md-3 mb-3">
                            <label for="business_id" class="form-label">{{ __('core.business_name') }} : *</label>
                            <select class="form-select form-select-sm filter-dropdown" name="business_id" id="business_id"
                                required>
                                <option value="">{{ __('core.please_select') }}</option>
                                @foreach ($data['businesses'] as $key => $value)
                                    <option value="{{ $value->id }}"
                                        {{ $value->id == auth()->user()->business_id ? 'selected' : '' }}>
                                        {{ $value->business_name }}</option>
                                @endforeach
                            </select>
                        </div>
                    @else
                        <input type="hidden" name="business_id" value="{{ auth()->user()->business_id }}">
                    @endif
                </form>
            </div>
        </div>
        {{-- Filter end --}}
    @endif

    <div class="main-card mb-3 card">
        <div class="card-body">
            <ul class="nav nav-tabs">
                <li class="nav-item">
                    <a data-bs-toggle="tab" href="#tab-eg10-0" class="mb-2 me-2 btn btn-shadow-primary btn-primary">
                        {{ __('core.home') }}
                    </a>
                </li>
                @if (auth()->user()->can('frontend.services.trash_view'))
                    <li class="nav-item">
                        <a data-bs-toggle="tab" href="#tab-eg10-1" class="mb-2 me-2 btn btn-shadow-danger btn-danger">
                            {{ __('core.trash') }}
                        </a>
                    </li>
                @endif
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="tab-eg10-0" role="tabpanel">
                    <div class="row" id="home-data">
                        {{-- <div class="col-md-4">
                            <div class="main-card mb-3 card">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <h5 class="card-title">Title</h5>
                                        @if (auth()->user()->can('frontend.services.update') || auth()->user()->can('frontend.services.delete'))
                                            <p>
                                                @if (auth()->user()->can('frontend.services.update'))
                                                    <a href="" class="update" data-bs-toggle="modal"
                                                        data-bs-target="#updateModal">
                                                        <i class="fa fa-lg fa-toggle-on"></i>
                                                    </a>
                                                    <a href="" class="edit" data-bs-toggle="modal"
                                                        data-bs-target="#editModal">
                                                        <i class="fa fa-lg fa-edit text-primary ms-2"></i>
                                                    </a>
                                                @endif
                                                @if (auth()->user()->can('frontend.services.delete'))
                                                    <a href="" class="destroy" data-bs-toggle="modal"
                                                        data-bs-target="#destroyModal">

                                                        <i class="fa fa-lg fa-trash text-danger ms-2"></i>
                                                    </a>
                                                @endif
                                            </p>
                                        @endif
                                    </div>
                                    <div class="row">
                                        <div class="col-3 d-flex justify-content-center align-items-center">
                                            <i class="fa fa-fw fa-3x"></i>
                                        </div>
                                        <div class="col-9">
                                            <p>
                                                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Impedit
                                                voluptatibus aliquid minima delectus rem qui?
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div> --}}
                    </div>
                </div>
                @if (auth()->user()->can('frontend.services.trash_view'))
                    <div class="tab-pane" id="tab-eg10-1" role="tabpanel">
                        <div class="row" id="trash-data">
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>
        $(document).ready(function() {
            // Open add form
            $(document).on('click', '#add', function(e) {

                e.preventDefault();
                $.ajax({
                    method: 'GET',
                    url: $(this).attr('href'),
                    success: function(response) {

                        $("#addModal .modal-body").html(response);
                        addSubmit(); // Reinitialize addSubmit for new content
                    },
                    error: function(response) {
                        $("#addModal .modal-body").html(

                            'Something Wrong, Please Try Again Later.');
                    }
                });
            });

            // Submit add form
            function addSubmit() {
                $('#addSubmit').on('submit', function(e) {
                    e.preventDefault();
                    var formData = new FormData(this);
                    $.ajax({
                        method: 'POST',
                        url: $(this).attr('action'),
                        data: formData,
                        processData: false, // Important for file uploads
                        contentType: false, // Important for file uploads
                        success: function(response) {

                            $('#addModal').modal('hide');
                            toastr.success(response.msg);

                            loadData();
                        },
                        error: function(response) {}
                    });
                });
            }


            // Open edit form
            $(document).on('click', '.edit', function(e) {

                e.preventDefault();
                $.ajax({
                    method: 'GET',
                    url: $(this).attr('href'),
                    success: function(response) {

                        $("#editModal .modal-body").html(response);
                        editSubmit(); // Reinitialize editSubmit for new content
                    },
                    error: function(response) {
                        $("#editModal .modal-body").html(

                            'Something Wrong, Please Try Again Later.');
                    }
                });
            });

            // Submit edit form
            function editSubmit() {
                $('#editSubmit').on('submit', function(e) {
                    e.preventDefault();
                    var formData = new FormData(this);

                    $.ajax({
                        method: 'POST',
                        url: $(this).attr('action'),
                        data: formData,
                        processData: false, // Important for file uploads
                        contentType: false, // Important for file uploads
                        success: function(response) {
                            if (response.success) {

                                $('#editModal').modal('hide');
                                loadData();
                            } else {

                            }
                        },
                        error: function(response) {}
                    });
                });
            }


            // update
            var updateUrl = '';
            $(document).on('click', '.update', function(e) {
                e.preventDefault();
                updateUrl = $(this).attr('href');
                $('#confirm-update').data('update-url', updateUrl); // Store update URL
            });

            // Confirm update modal
            $(document).on('click', '#confirm-update', function() {
                updateUrl = $(this).data('update-url'); // Retrieve update URL
                $.ajax({
                    method: 'PUT',
                    url: updateUrl,
                    success: function(response) {
                        $('#updateModal').modal('hide');
                        loadData();
                    },
                    error: function(response) {}
                });
            });

            // Destroy
            var destroyUrl = '';
            $(document).on('click', '.destroy', function(e) {
                e.preventDefault();
                destroyUrl = $(this).attr('href');
                $('#confirm-destroy').data('destroy-url', destroyUrl); // Store destroy URL
            });

            // Confirm destroy modal
            $(document).on('click', '#confirm-destroy', function() {
                destroyUrl = $(this).data('destroy-url'); // Retrieve destroy URL
                $.ajax({
                    method: 'DELETE',
                    url: destroyUrl,
                    success: function(response) {
                        $('#destroyModal').modal('hide');

                        loadData();
                    },
                    error: function(response) {}
                });

            });

            // Restore
            var restoreUrl = '';
            $(document).on('click', '.restore', function(e) {
                e.preventDefault();
                restoreUrl = $(this).attr('href');
                $('#confirm-restore').data('restore-url', restoreUrl); // Store restore URL
            });

            // Confirm restore modal
            $(document).on('click', '#confirm-restore', function() {
                restoreUrl = $(this).data('restore-url'); // Retrieve restore URL
                $.ajax({
                    method: 'POST',
                    url: restoreUrl,
                    success: function(response) {
                        $('#restoreModal').modal('hide');
                        loadData();
                    },
                    error: function(response) {}
                });
            });

            // Delete
            var deleteUrl = '';
            $(document).on('click', '.delete', function(e) {
                e.preventDefault();
                deleteUrl = $(this).attr('href');
                $('#confirm-delete').data('delete-url', deleteUrl); // Store delete URL
            });

            // Confirm delete modal
            $(document).on('click', '#confirm-delete', function() {
                deleteUrl = $(this).data('delete-url'); // Retrieve delete URL
                $.ajax({
                    method: 'DELETE',
                    url: deleteUrl,
                    success: function(response) {
                        $('#deleteModal').modal('hide');
                        loadData();
                    },
                    error: function(response) {}
                });
            });

            $('.filter-dropdown').on('change', function() {
                loadData();
            })

            // Load data
            function loadData() {
                let formData = $('#filter-form').serialize();

                $.ajax({
                    method: 'GET',
                    data: formData,
                    url: "{{ route('frontend.services.index') }}",
                    success: function(response) {

                        $('#home-data').html(response.homeData);
                        $('#trash-data').html(response.trashData);

                    },
                    error: function(response) {}
                });
            }


            // Initial load
            loadData();
        });
    </script>
@endpush