@extends('users-area.layouts.app')

@section('title', 'Outlet')

@section('content')
    <div class="card bg-light-info shadow-none position-relative overflow-hidden">
        <div class="card-body px-4 py-3">
            <div class="row align-items-center">
                <div class="col-9">
                    <h4 class="fw-semibold mb-8">Outlet</h4>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item">
                                <a class="text-muted " href="{{ route('users-area.index') }}">Home</a>
                            </li>
                            <li class="breadcrumb-item" aria-current="page">
                                Outlet
                            </li>
                        </ol>
                    </nav>
                </div>
                <div class="col-3">
                    <div class="text-center mb-n5">
                        <img src="{{ asset('users-area-template/images/breadcrumb/ChatBc.png') }}" alt="" class="img-fluid mb-n4">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card card-body">
        <div class="row">
            <div class="col-md-4 col-xl-3">
                <div class="position-relative">
                    <input type="text" class="form-control search ps-5" id="input-search" placeholder="Search Outlet..." autocomplete="false">
                    <i class="ti ti-search position-absolute top-50 start-0 translate-middle-y fs-6 text-dark ms-3"></i>
                </div>
            </div>
            <div class="col-md-8 col-xl-9 text-end d-flex justify-content-md-end justify-content-center mt-3 mt-md-0">
                <a href="{{ route('users-area.outlet.create') }}" class="btn btn-info d-flex align-items-center">
                    <i class="ti ti-building-store text-white me-1 fs-5"></i> Add Outlet 
                </a>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table w-100 search-table align-middle text-nowrap">
                    <thead class="header-item">
                        <th></th>
                        <th>Outlet Code</th>
                        <th>Outlet Name</th>
                        <th>Outlet Manager Name</th>
                        <th>Outlet Type</th>
                        <th>Links</th>
                        <th width="2%"></th>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
              </div>
        </div>
    </div>
@endsection

@push('script')
    <script src="{{ asset('users-area-template/libs/datatables.net/js/jquery.dataTables.min.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        $(function(){
            let datatable = $(".table").DataTable({
                "processing": true,
                "serverSide": true,
                "responsive": true,
                "language": {
                    "processing": `<div class="shadow p-3"><div class="spinner-border spinner-border-sm text-primary" role="status"></div> Processing...</div>`,
                },
                "order": [
                    [2, 'asc']
                ],
                "ajax": {
                    "url": '{{ route('users-area.outlet.datatables') }}',
                    "type": "GET"
                },
                "columns": [
                    {
                        data: 'image',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'outlet_code'
                    },
                    {
                        data: 'outlet_name'
                    },
                    {
                        data: 'outlet_manager_name'
                    },
                    {
                        data: 'outlet_type'
                    },
                    {
                        data: 'link',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'action',
                        width: 100,
                        orderable: false,
                        searchable: false
                    }
                ]
            })
            
            $('.table').on('click', 'tr td .btn-delete', function() {
                const t = $(this)

                Swal.fire({
                    title: "Are you sure?",
                    text: "You won't be able to revert this!",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#3085d6",
                    cancelButtonColor: "#d33",
                    confirmButtonText: "Yes, delete it!"
                }).then((result) => {
                    if (result.isConfirmed) {
                        const form = $(this).closest('td').find('form.form-delete')

                        $.ajax({
                            url: `${form.attr('action')}`,
                            type: "POST",
                            data: form.serialize(),
                            beforeSend: function(){
                                t.html('<div class="spinner-border spinner-border-sm" role="status"></div>')
                            },
                            success: function(data) {
                                if (data.success) {
                                    datatable.ajax.reload()
                                    toastr.success(`Outlet deleted successfully`, "Success")
                                }
                            },
                            error: function(xhr) {
                                if (xhr.responseJSON) {
                                    if (xhr.responseJSON.errors) {
                                        $.each(xhr.responseJSON.errors, function(i, item) {
                                            $('form').find(`input[name="${i}"],select[name="${i}"],textarea[name="${i}"]`).closest('div').append(`<small class="error-message text-danger">${item}</small>`)
                                        })
                                    } else {
                                        toastr.error(`${xhr.responseJSON.message}`, "Error")
                                    }
                                } else {
                                    toastr.error(`Profile image failed to update`, "Error")
                                }
                                
                                t.html('<i class="ti ti-trash fs-4"></i>')
                            }
                        })
                    }
                });
            })

            $('.search').on('keyup keydown change', function(){
                datatable.search( this.value ).draw();
            })
        })
    </script>
@endpush

@push('css')
    <link rel="stylesheet" href="{{ asset('users-area-template/libs/datatables.net-bs5/css/dataTables.bootstrap5.min.css') }}">
    <style>.table-responsive { overflow-y: hidden; padding-bottom:20px}.dataTables_info{margin-bottom: 10px}.dataTables_filter{display: none}</style>
@endpush