@extends('back_office.layouts.app')

@section('content')
    <section class="content">
        <div class="container-fluid">
            <div class="card">
                <div class="card-header overflow-hidden">
                    <div class="row gx-4">
                        <div class="col-auto">
                            <div class="avatar avatar-xl position-relative">
                                @if ($user->avatar)
                                    <img src="{{ $user->avatar }}" alt="profile_image"
                                        class="w-100 border-radius-lg shadow-sm">
                                @else
                                    <img src="/uploads/users/avatar.jpg" alt="profile_image"
                                        class="w-100 border-radius-lg shadow-sm">
                                @endif
                            </div>
                        </div>
                        <div class="col-auto my-auto">
                            <div class="">
                                <h5 class="mb-1">
                                    {{ $user->name }}
                                </h5>
                                <p class="mb-0 font-weight-bold text-sm">
                                    <b>Email:</b> {{ $user->email }}
                                </p>
                                <p class="mb-0 font-weight-bold text-sm">
                                    <b>Phone Number:</b> {{ $user->phone }}
                                </p>
                                <p class="mb-0 font-weight-bold text-sm">
                                    <b>Cash Payment:</b> {{ $user->cash_payment_flag == 0 ? 'Deactive' : 'Active' }}
                                </p>
                                @if ($user->created_at)
                                    <p class="mb-0 font-weight-bold text-sm">
                                        <b>Account Created At:</b> {{ $user->created_at->format('d-m-Y') }}
                                    </p>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card mt-4">
                <div class="card-body">
                    <h5 class="card-title" id="card-title">Car Info</h5>
                    <ul class="nav nav-tabs" id="myTab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="car-info-tab" data-bs-toggle="tab"
                                data-bs-target="#car-info" type="button" role="tab" aria-controls="car-info"
                                aria-selected="true">Cars Info</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="address-info-tab" data-bs-toggle="tab"
                                data-bs-target="#address-info" type="button" role="tab" aria-controls="address-info"
                                aria-selected="false">Address Info</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="subscription-info-tab" data-bs-toggle="tab"
                                data-bs-target="#subscription-info" type="button" role="tab"
                                aria-controls="subscription-info" aria-selected="false">Subscription Info</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="wash-info-tab" data-bs-toggle="tab" data-bs-target="#wash-info"
                                type="button" role="tab" aria-controls="wash-info" aria-selected="false">Wash
                                Info</button>
                        </li>
                        {{-- <li class="nav-item" role="presentation">
                            <button class="nav-link" id="carpet-wash-info-tab" data-bs-toggle="tab"
                                data-bs-target="#carpet-wash-info" type="button" role="tab"
                                aria-controls="carpet-wash-info" aria-selected="false">Carpet Wash Info</button>
                        </li> --}}
                    </ul>
                    <div class="tab-content p-2" id="myTabContent">
                        {{-- Car Info --}}
                        <div class="tab-pane p-2 fade  show active" id="car-info" role="tabpanel"
                            aria-labelledby="car-info-tab">
                            <table class="table dataTable no-footer" id="car-info-datatable" style="width: 100%;">
                                <thead>
                                    <tr>
                                        <th>Id</th>
                                        <th>Subscription</th>
                                        <th>Car Type</th>
                                        <th>Car Model</th>
                                        <th>Brand</th>
                                        <th>Color</th>
                                        <th>Car Location</th>
                                        <th>Plate Number</th>
                                        <th>Car Image</th>
                                        <th>Year Of Manufuture</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>

                        {{-- Address Info --}}
                        <div class="tab-pane p-2 fade" id="address-info" role="tabpanel" aria-labelledby="address-info-tab">
                            <table class="table dataTable no-footer" id="address-info-datatable" style="width: 100%;">
                                <thead>
                                    <tr>
                                        <th>Id</th>
                                        <th>Area</th>
                                        <th>Street Name</th>
                                        <th>Building No</th>
                                        <th>Loot Number</th>
                                        <th>Latitude</th>
                                        <th>Longitude</th>
                                        <th>Notes</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>

                        {{-- Subscription info --}}
                        <div class="tab-pane p-2 fade" id="subscription-info" role="tabpanel"
                            aria-labelledby="subscription-info-tab">
                            <table class="table dataTable no-footer" id="subscription-info-datatable" style="width: 100%;">
                                <thead>
                                    <tr>
                                        <th>Id</th>
                                        <th>Package</th>
                                        <th>Start Date</th>
                                        <th>End Date</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>



                        {{-- Wash info --}}
                        <div class="tab-pane p-2 fade" id="wash-info" role="tabpanel" aria-labelledby="wash-info-tab">
                            <table class="table dataTable no-footer" id="wash-info-datatable" style="width: 100%;">
                                <thead>
                                    <tr>
                                        <th>Id</th>
                                        <th>Car</th>
                                        <th>subscription</th>
                                        <th>service</th>
                                        <th>date</th>
                                        <th>slot</th>
                                        {{-- <th>team</th>
                                <th>area</th> --}}
                                        <th>status</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('scripts')
    <link rel="stylesheet" href="{{ asset('css/tables.css') }}">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.0.1/css/buttons.bootstrap4.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap4.min.css">
    <script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.0.1/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.bootstrap4.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
    <script src="{{ env('APP_URL') }}/vendor/datatables/buttons.server-side.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $('.nav-link').on('click', function() {
                var tabText = $(this).text();

                if (tabText == "Cars Info") {
                    $("#car-info-datatable").DataTable().draw();
                } else if (tabText == "Address Info") {
                    $("#address-info-datatable").DataTable().draw();
                } else if (tabText == "Subscription Info") {
                    $("#subscription-info-datatable").DataTable().draw();
                } else if (tabText == "Wash Info") {
                    $("#wash-info-datatable").DataTable().draw();
                }
                $('#card-title').text(tabText);
            });

            /* Cars Info Datatable */
            var carCreateUrl = "{{ route('car-info.create', ['id' => $user->id]) }}";
            var carsInfo = $("#car-info-datatable").DataTable({
                dom: 'Bfrtip',
                "oSearch": {
                    "bSmart": false
                },
                buttons: [{
                        extend: 'pageLength',
                    },
                    {
                        text: 'Reload',
                        action: function(e, dt, node, config) {
                            carsInfo.ajax.reload();
                        }
                    }
                ],
                language: {
                    emptyTable: "Cars info not available."
                },
                processing: true,
                serverSide: true,
                responsive: true,
                scrollX: true,
                ajax: {
                    url: "{!! route('car-info', ['id' => $user->id]) !!}", // Replace with your specific URL
                    type: "GET",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr(
                            'content') // Include CSRF token if you are using Laravel
                    },
                    data: function(d) {
                        // Add any additional data here if needed
                    }
                },
                columns: [{
                        data: 'id',
                        name: 'id'
                    },
                    {
                        data: 'package_name',
                        name: 'package_name'
                    },
                    {
                        data: 'type.name',
                        name: 'type.name'
                    },
                    {
                        data: 'model.name',
                        name: 'model.name'
                    },
                    {
                        data: 'brand.name',
                        name: 'brand.name'
                    },
                    {
                        data: 'color',
                        name: 'color'
                    },
                    {
                        data: 'customer_address.area',
                        name: 'customer_address.area',
                        render: function(data, type, row) {
                            return data ? data :
                                'N/A'; // Return 'N/A' or any default text if the field is not found
                        }
                    },
                    {
                        data: 'plate_number',
                        name: 'plate_number'
                    },
                    {
                        data: 'image',
                        name: 'image'
                    },
                    {
                        data: 'year_of_manufuture',
                        name: 'year_of_manufuture'
                    },
                ],
            });

            /* Address Info Datatable */
            var addressCreateUrl = "{{ route('address-info.create', ['id' => $user->id]) }}";
            var addressInfo = $("#address-info-datatable").DataTable({
                dom: 'Bfrtip',
                "oSearch": {
                    "bSmart": false
                },
                buttons: [{
                        extend: 'pageLength',
                    },
                    {
                        text: 'Reload',
                        action: function(e, dt, node, config) {
                            dt.ajax.reload();
                        }
                    }
                ],
                language: {
                    emptyTable: "Address info not available."
                },
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{!! route('address-info', ['id' => $user->id]) !!}", // Replace with your specific URL
                    type: "GET",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr(
                            'content') // Include CSRF token if you are using Laravel
                    },
                    data: function(d) {
                        // Add any additional data here if needed
                    }
                },
                columns: [{
                        data: 'id',
                        name: 'id'
                    },
                    {
                        data: 'area',
                        name: 'area'
                    },
                    {
                        data: 'street_name',
                        name: 'street_name'
                    },
                    {
                        data: 'building_no',
                        name: 'building_no'
                    },
                    {
                        data: 'loot_number',
                        name: 'loot_number'
                    },
                    {
                        data: 'latitude',
                        name: 'latitude'
                    },
                    {
                        data: 'longitude',
                        name: 'longitude'
                    },
                    {
                        data: 'notes',
                        name: 'notes'
                    }
                ],
            });

            /* Subscription Info Datatable */
            var subscriptionCreateUrl = "{{ route('subscription-info.create', ['id' => $user->id]) }}";
            var subscriptionInfo = $("#subscription-info-datatable").DataTable({
                dom: 'Bfrtip',
                order: [
                    [0, 'desc']
                ],
                "oSearch": {
                    "bSmart": false
                },
                buttons: [{
                        extend: 'pageLength',
                    },
                    {
                        text: 'Reload',
                        action: function(e, dt, node, config) {
                            dt.ajax.reload();
                        }
                    }
                ],
                language: {
                    emptyTable: "Subscription info not available."
                },
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{!! route('subscription-info', ['id' => $user->id]) !!}", // Replace with your specific URL
                    type: "GET",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr(
                            'content') // Include CSRF token if you are using Laravel
                    },
                    data: function(d) {
                        // Add any additional data here if needed
                    }
                },
                columns: [{
                        data: 'id',
                        name: 'id'
                    },
                    {
                        data: 'all_package.name_en',
                        name: 'all_package.name_en'
                    },
                    {
                        data: 'subscription_date',
                        name: 'subscription_date'
                    },
                    {
                        data: 'subscription_exp_date',
                        name: 'subscription_exp_date'
                    },
                ],
            });


            /* Subscription Info Datatable */
            var washTaskCreateUrl = "{{ route('washtask-info.create', ['id' => $user->id]) }}";
            var washtaskInfo = $("#wash-info-datatable").DataTable({
                dom: 'Bfrtip',
                order: [
                    [0, 'desc']
                ],
                "oSearch": {
                    "bSmart": false
                },
                scrollX: true,
                buttons: [{
                        text: 'Create',
                        className: 'btn-info',
                        action: function(e, dt, node, config) {
                            window.location.href = washTaskCreateUrl;
                        }
                    },
                    {
                        extend: 'csv',
                        text: '<i class="fas fa-plus"></i> Export CSV',
                        className: 'btn-export'
                    },
                    {
                        extend: 'excel',
                        text: '<i class="fas fa-plus"></i> Export Excel',
                        className: 'btn-success'
                    },
                    {
                        extend: 'pageLength',
                    },
                    {
                        text: 'Reload',
                        action: function(e, dt, node, config) {
                            dt.ajax.reload();
                        }
                    }
                ],
                language: {
                    emptyTable: "Wash Task info not available."
                },
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{!! route('washtask-info', ['id' => $user->id]) !!}", // Replace with your specific URL
                    type: "GET",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr(
                            'content') // Include CSRF token if you are using Laravel
                    },
                    data: function(d) {
                        // Add any additional data here if needed
                    }
                },
                columns: [{
                        data: 'id',
                        name: 'id'
                    },
                    {
                        data: 'car_id',
                        name: 'car_id'
                    },
                    {
                        data: 'subscription_id',
                        name: 'subscription_id'
                    },
                    {
                        data: 'service.name',
                        name: 'service.name'
                    },
                    {
                        data: 'date',
                        name: 'date'
                    },
                    {
                        data: 'slot_id.slot',
                        name: 'slot_id.slot',
                        defaultContent: '-'
                    },
                    // {
                    //     data: 'team.name',
                    //     name: 'team.name',
                    //     defaultContent: '-'
                    // },
                    // {
                    //     data: 'area',
                    //     name: 'area'
                    // },
                    {
                        data: 'status',
                        name: 'status'
                    },
                    @if (auth()->user()->roles->first()->hasPermissionTo('user-info-management') || auth()->user()->hasRole('super-admin'))
                        {
                            data: 'action',
                            name: 'action'
                        },
                    @endif
                ],
                error: function(response) {
                    location.reload();
                },
            });

            function deleteWashTask(userId, id) {

                Swal.fire({
                    title: "Are you sure?",
                    text: "You will not be able to recover this Wash Task!",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonColor: '#36c6d3',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Confirm',
                    cancelButtonText: 'Cancel'
                }).then(function(result) {
                    if (result.value) {
                        $.ajax({
                            url: "/admin/wash-info/delete/" + userId + "/" + id,
                            type: "POST",
                            data: {
                                "_token": "{{ csrf_token() }}",
                            },
                            success: function(response) {
                                $("#wash-info-datatable").DataTable().draw();
                                Swal.fire({
                                    title: "Wash Task",
                                    text: "Wash Task has been successfully deleted",
                                    icon: "success"
                                });
                            },
                            error: function(error) {
                                location.reload();
                            }
                        });

                    } else if (result.dismiss == 'cancel') {
                        console.log('cancel')
                    }

                });
            }

        });
    </script>
@endpush