@extends('back_office.layouts.app')

<style>
    #package-id {
        font-size: 13px !important;
        padding-right: 10%;
    }
    .dataTables_info{
        font-size: 12px !important;
    }
    .dataTables_paginate.paging_simple_numbers{
        font-size: 12px !important;
    }
</style>
@section('content')

<section class="content">
    <div class="container-fluid">

        <div class="row">
            <div class="col-2 stat">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-6">
                                <div class="numbers">
                                    <h5 class="font-weight-bolder mb-0">
                                        {{$allCarpets}}
                                    </h5>
                                </div>
                            </div>
                            <div class="col-6 text-end">
                                <div class="icon icon-shape bg-gradient-info shadow text-center border-radius-md">
                                    <i class="fa fa-car text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                            <p class="text-sm mb-0 text-capitalize font-weight-bold">Total</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-2 stat">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-6">
                                <div class="numbers">
                                    <h5 class="font-weight-bolder mb-0">
                                        {{$doneCarpets}}
                                    </h5>
                                </div>
                            </div>
                            <div class="col-6 text-end">
                                <div class="icon icon-shape bg-gradient-success shadow text-center border-radius-md">
                                    <i class="fa fa-car text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                            <p class="text-sm mb-0 text-capitalize font-weight-bold">Completed</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-2 stat">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-6">
                                <div class="numbers">
                                    <h5 class="font-weight-bolder mb-0">
                                        {{$doingCarpets}}
                                    </h5>
                                </div>
                            </div>
                            <div class="col-6 text-end">
                                <div class="icon icon-shape bg-gradient-warning shadow text-center border-radius-md">
                                    <i class="fa fa-car text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                            <p class="text-sm mb-0 text-capitalize font-weight-bold">In progress</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-2 stat">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-6">
                                <div class="numbers">
                                    <h5 class="font-weight-bolder mb-0">
                                        {{ $remainingCarpets }}
                                    </h5>
                                </div>
                            </div>
                            <div class="col-6 text-end">
                                <div class="icon icon-shape bg-gradient-secondary shadow text-center border-radius-md">
                                    <i class="fa fa-car text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                            <p class="text-sm mb-0 text-capitalize font-weight-bold">Not Completed</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-2 stat">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-6">
                                <div class="numbers">
                                    <h5 class="font-weight-bolder mb-0">
                                        {{$cancelledCarpets}}
                                    </h5>
                                </div>
                            </div>
                            <div class="col-6 text-end">
                                <div class="icon icon-shape bg-gradient-danger shadow text-center border-radius-md">
                                    <i class="fa fa-car text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                            <p class="text-sm mb-0 text-capitalize font-weight-bold">Cancelled</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <br>

        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="form-group col-4">
                        <label for="customer">Customer</label>
                        <select class="form-control" name="customer" id="customer">
                            <option value="all">All</option>
                            @foreach($customers as $customer)
                                <option value="{{$customer->id}}">{{$customer->name}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group col-4">
                        <label for="status">Status</label>
                        <select class="form-control" name="status" id="status">
                            <option value="new" selected>New</option>
                            <option value="sheduled">Sheduled</option>
                            <option value="started">Started</option>
                            <option value="ended">Ended</option>
                            <option value="canceled">Canceled</option>
                            <option value="deleted">Deleted</option>
                            <option value="all">All</option>
                        </select>
                    </div>
                    {{-- <div class="form-group col-4">
                        <label>Plate Number</label>
                        <input type="text" class="form-control" id="plate_number">
                    </div> --}}
                    <div class="form-group col-4">
                        <label>ID</label>
                        <input type="number" class="form-control" id="id">
                    </div>
                    <div class="form-group col-4">
                        <label for="inputEmail4">Start Date</label>
                        <input type="date" class="form-control" id="start" value="{{Carbon\Carbon::today()->format('Y-m-d')}}">
                    </div>
                    <div class="form-group col-4">
                        <label for="inputPassword4">End Date</label>
                        <input type="date" class="form-control" id="end"  value="{{Carbon\Carbon::today()->format('Y-m-d')}}">
                    </div>
                    <div class="form-group col-4">
                        <label for="status">Team</label>
                        <select class="form-control" name="team" id="team">
                            <option value="all">All</option>
                            @foreach($teams as $team)
                            <option value="{{$team->id}}">{{$team->name}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group col-4">
                        <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->name}}">{{$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%;">Search</button>
                    </div>
                </div>
            </div>
        </div><br>

        <div class="card">
            <div class="card-body" id="packages">
                @if (session('success'))
                <div class="alert alert-success" role="alert">
                    <strong>Success!</strong> {{ session('success') }}
                </div>
                @endif
                {{-- <button type="button" class="btn btn-info" style="float: right" name="assign" id="assign" disabled onclick="assignTeams()">Assign Team</button> --}}
                <button type="button" class="btn btn-info" style="float: right" name="assign" id="assign" data-toggle="modal" data-target="#assignTeamModal" disabled>Assign Team</button>

                {!! $dataTable->table() !!}
            </div>
        </div>
    </div>
</section>

<!-- Modal -->
<div class="modal fade" id="assignTeamModal" tabindex="-1" role="dialog" aria-labelledby="assignTeamModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="assignTeamModalLabel">Assign to Team</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                </div>
                <div class="modal-body">
                <form id="assignTeamForm">
                    <div class="form-group">
                    <label for="team_id">Select Team</label>
                    <select class="form-control" name="team_id" id="team_id">
                        @foreach($teams as $team)
                            <option value="{{$team->id}}">{{$team->name}}</option>
                        @endforeach
                    </select>
                    </div>
                    <button type="submit" style="float: right;" class="btn btn-success">Assign</button>
                </form>
            </div>
        </div>
    </div>
</div>


@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="{{env('APP_URL')}}/vendor/datatables/buttons.server-side.js"></script>
{!! $dataTable->scripts() !!}
<script src="{{ $cdn ?? asset('vendor/sweetalert/sweetalert.all.js')  }}"></script>
<script>
    $(document).ready(function () {
        var table = $('#carpet-wash-tasks-id').DataTable();


        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $('#reload').on('click', function() {
            var from = $("#start").val();
            var to = $("#end").val();
            var status = $("#status").val();
            var customer = $("#customer").val();
            // var plate_number = $("#plate_number").val();
            var team = $("#team").val();
            var area = $("#area").val();
            var id = $("#id").val();

            // Construct URL with parameters
            var newUrl = "{{ route('carpet-washes.list') }}?from=" + from + "&to=" + to + "&status=" + status + "&customer=" + customer + "&id=" + id + "&team=" + team + "&area=" + area;


            // var table = $('#carpet-wash-tasks-id').DataTable();
            // table.clear().draw();
            // table.clear().destroy();

            // $("#carpet-wash-tasks-id").DataTable().ajax.url(newUrl).load();
            table.ajax.url(newUrl).load();
        });

        $(document).on('change', '.assign-checkbox', function() {
            toggleAssignButton();
        });

        $('#select-all').on('click', function() {
            var rows = $('#carpet-wash-tasks-id').DataTable().rows({ 'search': 'applied' }).nodes();
            $('input[type="checkbox"]', rows).prop('checked', this.checked);
            toggleAssignButton();
        });

        $('#carpet-wash-tasks-id tbody').on('change', 'input[type="checkbox"]', function(){
            if(!this.checked){
                var el = $('#select-all').get(0);
                if(el && el.checked && ('indeterminate' in el)){
                    el.indeterminate = true;
                }
            }
            toggleAssignButton();
        });

        $('#assignTeamForm').on('submit', function(e) {
            e.preventDefault();

            var selectedTeam = $('#team_id').val();

            // Collect selected checkbox values
            var selectedValues = $('input[name="assign[]"]:checked').map(function() {
                return this.value;
            }).get();

            $.ajax({
                url: '{{ route("wash-tasks.assignTeam") }}',
                type: 'POST',
                data: {
                    ids: selectedValues,
                    teamId: selectedTeam
                },
                success: function(response) {
                    if(response.success) {
                        $("#assignTeamModal .close").click();
                        $("#assign").prop('disabled', true);
                        $('#select-all').prop('checked', false);
                        table =$("#carpet-wash-tasks-id").DataTable().draw();

                        Swal.fire({
                            title: "Wash Tasks",
                            text: response.message,
                            icon: "success"
                        });
                    }
                },
                error: function(error) {
                    Swal.fire({
                        title: "Wash Tasks",
                        text: "Something went wrong!!",
                        icon: "error"
                    });
                }
            });
        });
    });

    function toggleAssignButton() {
        // Check if any checkbox is checked
        var anyChecked = $('.assign-checkbox:checked').length > 0;

        // Enable or disable the Assign Team button
        $('#assign').prop('disabled', !anyChecked);
    }
</script>
@endpush

<script type="text/javascript">
    function deleteWashTask(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-tasks/delete/" + id,
                    type: "POST",
                    data: {
                        "_token": "{{ csrf_token() }}",
                    },
                    success: function(response) {
                        $("#carpet-wash-tasks-id").DataTable().draw();
                        message('error');
                    },
                    error: function(error) {
                        message('error');
                        location.reload();
                    }
                });

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

        });
    }

    function message(status) {
        Swal.fire({
            title: status == 'success' ? "Error" : "Wash Task deleted",
            text: status == 'success' ? "Somthing Happened" : "Wash Task has been successfully deleted",
            icon: status == 'success' ? "error" : "success",
        })
    }
</script>

@endsection