@extends('back_office.layouts.teamleader_app.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">
        <form id="wash">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        @if($team->user_id==auth()->id())
                            <div class="form-group col-4">
                                <label for="status">Team</label>
                                <select class="form-control" name="team" id="team">
                                    @if(!empty($teams) && count($teams)>0)
                                        <option value="all">All</option>
                                        @foreach ($teams as $team)
                                            <option value="{{ $team->id }}" {{$team->id==$team->id?'selected':''}}>{{ $team->name }}</option>
                                        @endforeach
                                    @else
                                        <option value="">No Teams Found</option>
                                    @endif
                                </select>
                            </div>
                        @endif

                        <div class="form-group col-4">
                            <label for="status">Service Type</label>
                            <select class="form-control" name="service_type" id="service_type">
                                @if(!empty($services) && count($services)>0)
                                    <option value="all">All</option>
                                    @foreach ($services as $service)
                                        <option value="{{ $service->id }}">{{ $service->name }}</option>
                                    @endforeach
                                @else
                                    <option value=>No Service Found</option>
                                @endif
                            </select>
                        </div>
                        <div class="form-group col-4">
                            <label for="status">Status</label>
                            <select class="form-control" name="status" id="status">
                                <option value="all">All</option>
                                <option selected value="new">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>--}}
                            </select>
                        </div>
                        <div class="form-group col-4">
                            <label for="inputEmail4">Start Date</label>
                            <input type="date" required 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" required 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-2" style="margin-top: 25px">
                            <button type="submit" class="btn bg-gradient-info" id="reload">Search</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
        <div id="wash-list-items">

        </div>
    </div>
</section>

<!-- Modal -->
<div class="modal fade" id="cancelWashTask" 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">Cancel</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="cancelTaskForm">
                    @csrf
                    <input type="hidden" name="task_id" class="task_id">
                    <div class="form-group">
                    <label for="team_id">Reason For Cancel:</label>
                    <select class="form-control" name="reason" id="reason">
                        @if(!empty($cancelList) && count($cancelList))
                            <option value="">Select cancel reason</option>
                            @foreach ($cancelList as $v)
                                <option value="{{ $v->name_en }}">{{ $v->name_en }}</option>
                            @endforeach

                        @else
                            <option value="">No Reason Found</option>
                        @endif
                    </select>
                    </div>
                    <button type="submit" style="float: right;" class="btn btn-success">Submit</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>
<script src="{{ $cdn ?? asset('vendor/sweetalert/sweetalert.all.js')  }}"></script>
<script>

    var getwashtasklist = "{{ route('teamleader-app.getwashtasklist') }}";
</script>
<script>
    $(document).ready(function () {

        @if (Session::has('success'))
            Swal.fire({
                title: "Wash Tasks",
                text: '{{ Session::get("success") }}',
                icon: "success"
            });
        @endif

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        var from = $("#start").val();
        var to = $("#end").val();
        var status = $("#status").val();
        var service_id = $("#service_type").val();
        var team = $("#team").val();

        getWashTaskList(status, service_id, team, from, to);

        $('#wash').on('submit', function(e) {
            e.preventDefault();
            from = $("#start").val();
            to = $("#end").val();
            status = $("#status").val();
            service_id = $("#service_type").val();
            team = $("#team").val();

            getWashTaskList(status, service_id, team, from, to);

        });

        $('body').on('click', '.cancel', function () {
            var task_id = $(this).attr('task-id');
            $('.task_id').val(task_id);
            $('#reason').val();
            $('#cancelWashTask').modal('show');
        });

        $('#cancelTaskForm').on('submit', function(e) {
            e.preventDefault();
            var formData = $('#cancelTaskForm').serialize();
            $.ajax({
                url: '{{ route("teamleader-app.wash.cancel") }}',
                type: 'POST',
                data: formData,

                success: function(response) {
                    if(response.success) {
                        $("#cancelWashTask").click();
                        getWashTaskList();
                        Swal.fire({
                            title: "Wash Tasks",
                            text: response.message,
                            icon: "success"
                        });
                    }
                },
                error: function(error) {
                    Swal.fire({
                        title: "Wash Tasks",
                        text: "Something went wrong!!",
                        icon: "error"
                    });
                }
            });
        });
    //     $(document).on('change', '.assign-checkbox', function() {
    //         toggleAssignButton();
    //     });

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

    //     $('#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);
    //                     $("#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 getWashTaskList(status=null, service=null, team=null, from=null, to=null) {
    $.ajax({
        type: 'GET',
        url: getwashtasklist,
        data: {
            status: status,
            service: service,
            team: team,
            from: from,
            to: to,
        },
        success: (result) => {
            console.log(result)
            $('#wash-list-items').html(result.html);
        },
    });
}
</script>
@endsection