@extends('back_office.layouts.app')

<style>
    .swal2-popup {
        font-size: 14px !important;
    }
</style>
@section('content')

    <section class="content">
        <div class="container-fluid">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-1"></div>
                        <div class="form-group col-6">
                            <label for="area">Area</label>
                            <select class="form-control" name="area" id="area">
                                <option value="all">All</option>
                                @foreach($areas as $area)
                                    <option value="{{$area->id}}">{{$area->name}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group col-2" style="margin-top: 25px">
                            <button type="button" class="btn bg-gradient-info" id="reload" style="width: 100%;" onclick="getArea()">Search</button>
                        </div>
                        <div class="col-1"></div>
                    </div>
                </div>
            </div>
            <br>
            <div class="card">
                <div class="card-body">
                    <button type="button" class="btn btn-info" style="float: right; margin-left: 5px" name="assign_worker" id="assign_worker">Assign Worker</button>
                    <button type="button" class="btn btn-info" style="float: right" name="assign" id="assign">Assign Team</button>
                    {!! $dataTable->table() !!}
                </div>
            </div>
        </div>
    </section>

    @push('scripts')
        <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
        <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>
            const table = $('#unassigned-subscription-dates-id').DataTable({
                dom: 'Bfrtip',
                "oSearch": {
                    "bSmart": true,
                },
                "pageLength": 10,
                "lengthMenu": [10, 20, 30, 50, 100],
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('unassigned_washes.index') }}",
                    type: 'GET',
                    data: function(d) {
                        d.area = $('#area').val();
                    }
                },
                columns: [{
                    data: 'customer/guest',
                    name: 'customer/guest'
                },
                    {
                        data: 'car',
                        name: 'car'
                    },
                    {
                        data: 'area',
                        name: 'area'
                    },
                    {
                        data: 'date',
                        name: 'date'
                    },
                    {
                        data: 'status',
                        name: 'status'
                    },
                    {
                        data: 'action',
                        name: 'action'
                    },
                    {
                        data: 'assign',
                        name: 'assign'
                    },
                ],
            });

            // set on change date picker
            $('#reload').on('click', function() {
                var area = $("#area").val();
                var plate_number = $("#plate_number").val();
                if (area) {
                    table.draw();
                }
            });

            // $('#customer').on('change', function() {
            //     var customer = $("#customer").val();
            //     if(customer) {
            //         table.draw();
            //     }
            // });
            //
            // $('#status').on('change', function() {
            //     var status = $("#status").val();
            //     if(status) {
            //         table.draw();
            //     }
            // });
        </script>

        <script type="text/javascript">
            var id = [];
            $(document).on('click', '#assign', function(){
                {
                    $('.washes:checked').each(function(){
                        id.push($(this).val());
                    });
                    if(id.length > 0)
                    {
                        $.ajax({
                            url:"/admin/unassigned_washes/team/"+id,
                            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                            method:"get",
                            data:{id:id},
                            success: function (response){
                                console.log(response);
                                window.location.href = "/admin/unassigned_washes/team/"+id;
                            }
                        });
                    }
                    else
                    {
                        Swal.fire({
                            position: 'top-end',
                            icon: 'error',
                            title: 'Please select at least one wash',
                            showConfirmButton: false,
                            timer: 2000
                        })
                    }
                }
            });

            $(document).on('click', '#assign_worker', function(){
                {
                    $('.washes:checked').each(function(){
                        id.push($(this).val());
                    });
                    if(id.length > 0)
                    {
                        $.ajax({
                            url:"/admin/unassigned_washes/worker/"+id,
                            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                            method:"get",
                            data:{id:id},
                            success: function (response){
                                console.log(response);
                                window.location.href = "/admin/unassigned_washes/worker/"+id;
                            }
                        });
                    }
                    else
                    {
                        Swal.fire({
                            position: 'top-end',
                            icon: 'error',
                            title: 'Please select at least one wash',
                            showConfirmButton: false,
                            timer: 2000
                        })
                    }
                }
            });

            $(document).ready(function() {
                var area = $("#area").val()
                console.log(area)
                if(area == 'all'){
                    document.getElementById('assign').disabled = true
                    document.getElementById('assign_worker').disabled = true
                }
                else {
                    document.getElementById('assign').disabled = false
                    document.getElementById('assign_worker').disabled = false
                }
            });

            function getArea(){
                var area = $("#area").val()
                console.log(area)
                if(area == 'all'){
                    document.getElementById('assign').disabled = true
                    document.getElementById('assign_worker').disabled = true
                }
                else {
                    document.getElementById('assign').disabled = false
                    document.getElementById('assign_worker').disabled = false
                }
            }
        </script>

    @endpush
@endsection