@extends('layouts.app') @push('css')
    <style>
        .select2-container--default .select2-selection--multiple .select2-selection__choice {
            color: #2d4053;
        }
    </style>
    @endpush @section('content')
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    @isset($venue)
                        <h1 class="m-0 text-dark">Venue Edit</h1>
                    @else
                        <h1 class="m-0 text-dark">Assign Venue</h1>
                    @endisset
                </div>
                <!-- /.col -->
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <div class="d-inline p-2 text-white text-right">
                            <a href="{{ route('home') }}" class="btn btn-sm btn-info"><i class="fas fa-home"></i> Home</a>
                        </div>
                        <div class="d-inline p-2 text-white text-right">
                            <a href="{{ route('venue.index') }}" class="btn btn-sm btn-primary text-right"><i
                                    class="fas fa-arrow-circle-left"></i> Back</a>
                        </div>
                    </ol>
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            <!-- Main row -->
            <div class="row">
                <div class="col-md-12 col-x-12 col-sm-12">
                    <form action="{{ isset($venue) ? route('venue.update', $venue->id) : route('venue.store') }}"
                        method="POST">
                        @csrf @isset($venue)
                            @method('PUT')
                        @endisset
                        <div class="card-body">
                            <!-- <h5 class="card-title">Manage Venue</h5> <hr> -->
                            <!-- <br /> -->
                            <div class="form-group">
                                <label for="course_id">Course Name</label><br>
                                <select id="course_id" name="course_id"
                                    class="searchable_select form-control @error('course_id') is-invalid @enderror">
                                    <option value="z">Select Course</option>
                                    @foreach ($courses as $course)
                                        <option value="{{ $course->id }}"
                                            @isset($venue) {{ $course->id == $venue->course_id ? 'selected' : '' }} @endif>
                                            {{ $course->title }}</option>
                                    @endforeach
                                </select>
                                @error('course_id')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                           
                            @if (isset($venue))
                            <div class="form-group">
                                <label for="name">Venue Name</label><br>
                                <select id="name" name="name"
                                    class="searchable_select form-control @error('name') is-invalid @enderror">
                                    <option value="">Select Venue</option>
                                    @foreach ($allvenues as $allvenue)
                                        <option value="{{ $allvenue->name }}"
                                            @isset($venue) {{ $venue->name == $allvenue->name ? 'selected' : '' }} @endif>
                                            {{ $allvenue->name }}</option>
                                    @endforeach
                                </select>
                                @error('name')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror

                                </div>


                            @else
                            <div class="col-md-12 col-x-12 col-sm-12 hiddens3">
                                <fieldset class="external">
                                    <legend class="scheduler-border" style="width: auto;">Specify Location</legend>
                                    <div class="row">
                                        <div class="col-md-3 col-xs-3 col-sm-3">
                                            <label for="zone">Zone</label>
                                            <select id="zone_id"
                                                class="js-example-basic-single form-control @error('zone_id') is-invalid @enderror"
                                                name="zone_id">
                                                <option value="">Select Zones</option>
                                                @foreach ($zones as $zone)
                                                    <option value="{{ $zone->id }}">{{ $zone->zone_name }}</option>
                                                @endforeach
                                            </select>
                                            @error('zone_id')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </div>

                                        <div class="col-md-3 col-xs-3 col-sm-3">
                                            <div class="form-group">
                                                <label for="selectDistrict">District Name</label>
                                                <select id="district_id"
                                                    class="js-example-basic-single form-control @error('district_id') is-invalid @enderror"
                                                    name="district_id"> </select>
                                                @error('district_id')
                                                    <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="col-md-3 col-xs-3 col-sm-3">
                                            <div class="form-group">
                                                <label for="upazila_id">Upazila Name</label>
                                                <select id="upazila_id"
                                                    class="js-example-basic-single form-control @error('upazila_id') is-invalid @enderror"
                                                    name="upazila_id">
    
                                                </select>
                                                @error('upazila_id')
                                                    <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>


                                   
                                            <div class="col-md-12 col-xs-12 col-sm-12">
                                                <div class="form-group">
                                                    <label for="venue_name">Venue Name</label> <br>
                                                    <input type="text" size=80 name="venue_name" id="venue_name" placeholder="Venue Name" >
        
                                                 
                                                    @error('venue_name')
                                                        <span class="invalid-feedback" role="alert">
                                                            <strong>{{ $message }}</strong>
                                                        </span>
                                                    @enderror
                                                </div>
                                            </div>



                                        

                                    </div>
                                    <button type="button" class="btn btn-success" onclick="searchVenues()">
                                        Search
                                    </button>
                            </div>
                            </fieldset>
                            @endif

                            @isset($venue)
                                <button type="submit" class="btn btn-primary" value="Update">Update</button>
                            @else
                                {{-- <button type="submit" class="btn btn-primary" value="Create">Create</button> --}}
                            @endisset
                                            </div>
                    </form>


                    <div class="row">
                        <div class="col-md-12 col-sm-12 col-lg-12">
                            <div id="gg"></div>
                        </div>
                    </div>





                    <div class="row">

                        <div id="view"></div>
                    </div>
                    <div class="col-md-12 col-sm-12 col-lg-12">
                        <div id="info">

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



            </div>
            <!-- /.row (main row) -->
        </div>
        <!-- /.container-fluid -->
    </section>
    <!-- /.content -->
    @endsection @push('js')
    <script>
        $(document).ready(function() {
            $('select[name="zone_id"]').on('change', function() {
                var zone_id = $(this).val();
                if (zone_id) {
                    $.ajax({
                        url: '{{ url('/') }}' + '/zone/district/' + zone_id,
                        type: "GET",
                        dataType: "json",
                        success: function(data) {
                            var res = '<option value="">Select District</option>';
                            $.each(data.district, function(key, value) {
                                res +=
                                    '<option value="' + value.id + '">' + value
                                    .district_name + '</option>';
                            });
                            $('select[name="district_id"]').html(res);
                        }

                    });

                }
            });
        });


        $(document).ready(function() {
            $('select[name="district_id"]').on('change', function() {
                var district_id = $(this).val();

                if (district_id) {
                    $.ajax({
                        url: '{{ url('/') }}' + '/division/district/upazila/' + district_id,
                        type: "GET",
                        dataType: "json",
                        success: function(data) {
                            var res = '<option value="">Select Upazila</option>';
                            $.each(data.upazila, function(key, value) {
                                res +=
                                    '<option value="' + value.id + '">' + value
                                    .upazila_name + '</option>';
                            });
                            $('select[name="upazila_id"]').html(res);
                        }

                    });

                }
            });
        });





        function searchVenues() {

            var zone_id = $("#zone_id").val();
            var district_id = $("#district_id").val();
            var upazila_id = $("#upazila_id").val();
            var venue_name = $("#venue_name").val();

            console.log(zone_id);
            console.log(district_id);
            console.log(upazila_id);


            $.ajax({
                url: '{{ route('assignVenus.search') }}',
                type: "POST",

                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    zone_id: zone_id,
                    district_id: district_id,
                    upazila_id: upazila_id,
                    venue_name: venue_name,
                },
                beforeSend: function() {
                    $('#wait').show();
                },
                success: function(datas) {

                    if (datas == 1) {
                        Swal.fire({
                            title: '<strong>Sorry, No matching record Found</strong>',
                            type: 'error',
                            html: 'Problem: ' + 'No venue found in this location' +
                                '</br> Please try again! </br>',
                            showCloseButton: true
                        });
                    } else {
                        console.log(datas);

                        displayUsers3(datas);
                    }
                },
                error: function(err) {
                    $('#wait').hide();
                },
                complete: function() {
                    $('#wait').hide();
                }
            });
        }

        let displayUsers3 = (datas) => {



            let htmlTemplate = '';

            htmlTemplate += `<br><br><br><table class="table table-bordered table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">
            <input type="checkbox" id="selectAllCheckbox" onclick="selectAll()" > Select
          </th>
<th scope="col"> Name</th>
<th scope="col">Address</th>
<th scope="col">Phone</th>
<th scope="col">Trainings Ongoing</th>

</tr>
</thead>
<tbody>`;
            var i = 1;
            if (jQuery.isEmptyObject(datas)) {
                console.log('empty');
                htmlTemplate += `
            <td colspan='9' ><p align='center'> No Data Available</p> </td>`;

                document.querySelector('#gg').innerHTML = htmlTemplate;
            }
            for (let data of datas) {
                console.log(data);
             
                    var select =
                        `<input id="ad_Checkbox${data.id}" onclick="selectOrgChildRec(this)"  class="ads_Checkbox" type="checkbox" value="${data.id}" />`;
        

                htmlTemplate += `
<tr>
<th scope="row">${i} </th>
<td> ${select} </td>
<td>
${data.name}
</td>
<td>${data.address}</td>

<td>${data.phone}</td>
<td>${data.training_count}</td>


</tr>`
                i++;
            }
            htmlTemplate += `   </tbody>
</table>
<br>


<br> <br>
`;

            document.querySelector('#gg').innerHTML = htmlTemplate;
        }





        function selectOrgChildRec(ctrl) {

            var arr = $('.ads_Checkbox:checked').map(function() {
                return this.value;
            }).get();
            if (arr.length > 0) {
                button =
                    '  <input type="button" class="btn btn-sm btn-success" id="save_value" name="save_value" onclick="save()" value="Save" /> '

                document.querySelector('#info').innerHTML = button;
            } else {

                gg = ' '

                document.querySelector('#info').innerHTML = gg;
            }

        }





        function selectAll() {
            let checkboxes = document.querySelectorAll('.ads_Checkbox');
            let selectAllCheckbox = document.querySelector('#selectAllCheckbox');

            checkboxes.forEach((checkbox) => {
                checkbox.checked = selectAllCheckbox.checked;
            });


            var arr = $('.ads_Checkbox:checked').map(function() {
                return this.value;
            }).get();
            if (arr.length > 0) {
                button =
                    ' <input type="button" class="btn btn-sm btn-success" id="save_value" name="save_value" onclick="save()" value="Save" /> '

                document.querySelector('#info').innerHTML = button;
            } else {

                gg = ' '

                document.querySelector('#info').innerHTML = gg;
            }

        }

        // Function to send all selected venue ids to controller

        function save() {


            var course_id = $("#course_id").val();

            if (course_id == 'z') {
                alert("No course selected! Please select a course!!");
                return;
            }


            var arr = $('.ads_Checkbox:checked').map(function() {
                return this.value;
            }).get();
            $.ajax({
                url: '{{ route('ajax.storeVenues') }}',
                type: "POST",

                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    data: arr,
                    course_id: course_id,
                },
                success: function(data) {

                    if (data == 2) {
                        swal("Success!",
                            "All the venues have been assigned!",
                            "success")

                        searchVenues();


                    }
                    //else {

                    //     temp = '';
                    //     for (let i = 0; i < data.length; i++) {

                    //         temp += `${i+1}) ${data[i]}  `;
                    //     }

                    //     Swal({
                    //         title: 'Some of the teachers could not be added!',
                    //         text: 'The teachers with the following ids could not be added beacause they either  do not have any valid mail address or are already registered in a live course : ' +
                    //             temp
                    //     })
                    // }

                }

            });

        }
    </script>
@endpush