@extends('back_office.layouts.app')

@section('content')
    <div>
        <div class="container-fluid">
            <div class="card">

            </div>

            <div class="card">
                <div class="card-body">
                    <h5 class="card-title" id="card-title">User Info</h5>
                    <ul class="nav nav-tabs" id="myTab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="user-info-tab" data-bs-toggle="tab"
                                data-bs-target="#user-info" type="button" role="tab" aria-controls="user-info"
                                aria-selected="true">User Info</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" 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>
                    </ul>
                    <div class="tab-content p-2" id="myTabContent">
                        {{-- User Info --}}
                        <div class="tab-pane fade show active" id="user-info" role="tabpanel"
                            aria-labelledby="user-info-tab">
                            <div class="p-4 row">
                                <h5>Update User Info</h5>
                                <form autocomplete="off" class="form-horizontal"
                                    action="{{ route('user-info.update', ['id' => $user->id]) }}"enctype="multipart/form-data"
                                    method="POST">
                                    @csrf
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <label>Name *</label>
                                                    <input type="text" placeholder="name" name="name" id="name"
                                                        value="{{ $user->name }}"
                                                        class="form-control @error('name') is-invalid @enderror" />
                                                    @error('name')
                                                        <p class="error-validation">{{ $message }}</p>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <label id="mail">Email</label>
                                                    <input type="text" placeholder="email" name="email" id="email"
                                                        value="{{ $user->email }}" class="form-control" />
                                                    @error('email')
                                                        <p class="error-validation">{{ $message }}</p>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <label>Phone *</label>
                                                    <div class="input-group mb-3">
                                                        <div class="input-group-prepend">
                                                            <span class="input-group-text bg-info text-white">
                                                                +974
                                                            </span>
                                                        </div>
                                                        <input type="text" placeholder="phone" name="phone"
                                                            id="phone"
                                                            value="{{ preg_replace('/^\+974/', '', $user->phone) }}"
                                                            class="form-control @error('phone') is-invalid @enderror" />
                                                        @error('phone')
                                                            <p class="error-validation">{{ $message }}</p>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-12">
                                                @if (session()->has('phone'))
                                                    <p id="phonelHelp" class="form-text text-muted">{{ session('phone') }}
                                                    </p>
                                                @endif
                                            </div>
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <label>Password </label>
                                                    <div class="input-group mb-3">
                                                        <input autocomplete="new-password" type="password"
                                                            placeholder="password" name="password" id="password"
                                                            class="form-control @error('password') is-invalid @enderror" />
                                                        <div class="input-group-prepend">
                                                            <span class="input-group-text bg-info" id="basic-addon1">
                                                                <a onclick="viewPassword()" style="cursor: pointer;">
                                                                    <i id="open"
                                                                        class="fas fa-eye mt-1 mb-1 mr-1 text-white"></i>
                                                                    <i id="close"
                                                                        class="fas fa-eye-slash mt-1 mb-1 mr-1 text-white"
                                                                        hidden></i>
                                                                </a>
                                                            </span>
                                                        </div>
                                                    </div>
                                                    @error('password')
                                                        <p class="error-validation">{{ $message }}</p>
                                                    @enderror
                                                </div>
                                            </div>

                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <label>Cash Payment</label>
                                                    <div class="form-check form-switch h6" style="float: right">
                                                        <input type="checkbox" class="form-check-input"
                                                            onchange="updateTypeActivation(this, {{ $user->id }})"
                                                            name="cash_payment_flag" id="cash_payment_flag"
                                                            {{ $user->cash_payment_flag == 1 ? 'checked' : '' }}>
                                                        <label class="form-check-label" for="cash_payment_flag"></label>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <div class="col-lg-12 text-right">
                                                        <button type="submit" class="btn btn-info">Save</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>

                        {{-- Car Info --}}
                        <div class="tab-pane p-2 fade" 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>Brand</th>
                                        <th>Location</th>
                                        <th>Car Type</th>
                                        <th>Car Model</th>
                                        <th>Image</th>
                                        <th>Color</th>
                                        <th>Plate Number</th>
                                        <th>Action</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>
                                        <th>Action</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>Car number</th>
                                        <th>Start Date</th>
                                        <th>End Date</th>
                                        <th>Status</th>
                                        <th>Payment Status</th>
                                        <th>Action</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>
    </div>
@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="{{ $cdn ?? asset('vendor/sweetalert/sweetalert.all.js') }}"></script>
    <script src="{{ env('APP_URL') }}/vendor/datatables/buttons.server-side.js"></script>

    <script type="text/javascript">
        function viewPassword() {
            $password = document.getElementById('password');
            $open = document.getElementById('open');
            $close = document.getElementById('close');
            if ($password.type == 'text') {
                $password.type = 'password';
                $close.hidden = true;
                $open.hidden = false;
            } else {
                $password.type = 'text';
                $close.hidden = false;
                $open.hidden = true;
            }
        }

        function updateTypeActivation(el, id) {
            if ($(el).is(':checked')) {
                var status = 1;
            } else {
                var status = 0;
            }

            $.post('{{ route('user-info.update-payment-status') }}', {
                _token: '{{ csrf_token() }}',
                id: id,
                status: status
            }, function(data) {
                if (data == 1) {
                    $.notify('Status updated successfully', 'success');
                    setTimeout(function() {
                        window.location.reload(1);
                    }, 5000);
                } else {
                    $.notify('Something went wrong', 'danger');
                }
            });
        }

        $(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
                },
                scrollX: true,
                buttons: [{
                        text: 'Create',
                        className: 'btn-info',
                        action: function(e, dt, node, config) {
                            window.location.href = carCreateUrl;
                        }
                    },
                    {
                        extend: 'pageLength',
                    },
                    {
                        text: 'Reload',
                        action: function(e, dt, node, config) {
                            dt.ajax.reload();
                        }
                    }
                ],
                language: {
                    emptyTable: "Cars info not available."
                },
                processing: true,
                serverSide: 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: 'subscription.all_package.name_en',
                    //     name: 'subscription.all_package.name_en',
                    //     defaultContent: '-'
                    // },
                    {
                        data: 'brand.name',
                        name: 'brand.name',
                        defaultContent: '-'
                    },
                    {
                        data: 'customer_address.area',
                        name: 'customer_address.area',
                        defaultContent: '-'
                    },
                    {
                        data: 'type.name',
                        name: 'type.name',
                        defaultContent: '-'
                    },
                    {
                        data: 'model.name',
                        name: 'model.name',
                        defaultContent: '-'
                    },
                    {
                        data: 'image',
                        name: 'image'
                    },
                    {
                        data: 'color',
                        name: 'color'
                    },
                    {
                        data: 'plate_number',
                        name: 'plate_number'
                    },
                    @if (auth()->user()->roles->first()->hasPermissionTo('user-info-management') || auth()->user()->hasRole('super-admin'))
                        {
                            data: 'action',
                            name: 'action'
                        },
                    @endif
                ],
                error: function(response) {
                    location.reload();
                },
            });

            /* Address Info Datatable */
            var addressCreateUrl = "{{ route('address-info.create', ['id' => $user->id]) }}";
            var addressInfo = $("#address-info-datatable").DataTable({
                dom: 'Bfrtip',
                "oSearch": {
                    "bSmart": false
                },
                scrollX: true,
                buttons: [{
                        text: 'Create',
                        className: 'btn-info',
                        action: function(e, dt, node, config) {
                            window.location.href = addressCreateUrl;
                        }
                    },
                    {
                        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'
                    },
                    @if (auth()->user()->roles->first()->hasPermissionTo('user-info-management') || auth()->user()->hasRole('super-admin'))
                        {
                            data: 'action',
                            name: 'action'
                        },
                    @endif
                ],
                error: function(response) {
                    location.reload();
                },
            });

            /* 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
                },
                scrollX: true,
                buttons: [{
                        text: 'Create',
                        className: 'btn-info',
                        action: function(e, dt, node, config) {
                            window.location.href = subscriptionCreateUrl;
                        }
                    },
                    {
                        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',
                        "orderable": false,
                    },
                    {
                        data: 'get_car.plate_number',
                        name: 'get_car.plate_number',
                        "orderable": false,
                    },
                    {
                        data: 'subscription_date',
                        name: 'subscription_date'
                    },
                    {
                        data: 'subscription_exp_date',
                        name: 'subscription_exp_date'
                    },
                    {
                        data: 'status',
                        name: 'status'
                    },
                    {
                        data: 'payment_status',
                        name: 'payment_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();
                },
            });

            /* 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 deleteAddress(userId, id) {
            Swal.fire({
                title: "Are you sure?",
                text: "You will not be able to recover this type!",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: '#36c6d3',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Confirm',
                cancelButtonText: 'Cancel'
            }).then(function(result) {
                if (result.value) {
                    $.ajax({
                        url: "/admin/address-info/delete/" + userId + "/" + id,
                        type: "POST",
                        data: {
                            "_token": "{{ csrf_token() }}",
                        },
                        error: function(response) {
                            location.reload();
                        },
                    });

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

            });
        }

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

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

            });
        }

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

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

            });
        }
    </script>
@endpush