@extends('layouts.app')
@push('css')
@endpush
@section('content')
    @inject('carbon', 'Carbon\Carbon')
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0 text-dark">Create New Venue</h1>
                </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="col-12 col-sm-12">
                <div class="card card-primary card-outline card-tabs">
                    <div class="card-header p-0 pt-1 border-bottom-0">
                        <ul class="nav nav-tabs" id="custom-tabs-three-tab" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" id="custom-tabs-three-web-tab" data-toggle="pill"
                                    href="#custom-tabs-three-web" role="tab" aria-controls="custom-tabs-three-web"
                                    aria-selected="true">Web Panel</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="custom-tabs-three-excel-tab" data-toggle="pill"
                                    href="#custom-tabs-three-excel" role="tab" aria-controls="custom-tabs-three-excel"
                                    aria-selected="false">Excel</a>
                            </li>
                        </ul>
                    </div>
                    <div class="card-body">
                        <div class="tab-content" id="custom-tabs-three-tabContent">
                            <div class="tab-pane fade active show" id="custom-tabs-three-web" role="tabpanel"
                                aria-labelledby="custom-tabs-three-web-tab">
                                <form method="POST" id="web-panel">
                                    @csrf
                                    <div class="card-body">
                                        <h5 class="card-title">Enter Venue Information</h5>
                                        <br />
                                        <hr>
                                        <div class="form-group">
                                            <label for="name">Venue Name <span style="color: red;">*</span></label>
                                            <input name="name" id="name" type="text"
                                                placeholder="Type Venue Name (e.g. Teachers' Training College, Dhaka)"
                                                class="form-control" title="name" />
                                        </div>
                                        <div class="form-group">
                                            <label for="zone">Zone <span style="color: red;">*</span></label>
                                            <select id="selectZone" class="js-example-basic-single form-control"
                                                name="zone_id">
                                                <option value="">Select Zones</option>
                                                @foreach ($zones as $zone)
                                                    <option value="{{ $zone->id }}">{{ $zone->zone_name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label for="selectDistrict">District <span style="color: red;">*</span></label>
                                            <select id="selectDistrict" class="js-example-basic-single form-control"
                                                name="district_id"></select>
                                        </div>
                                        <div class="form-group">
                                            <label for="upazila_id">Upazila <span style="color: red;">*</span></label>
                                            <select id="upazila_id" class="js-example-basic-single form-control"
                                                name="upazila_id"></select>
                                        </div>
                                        <div class="form-group">
                                            <label for="address">Venue Address</label>
                                            <input name="address" id="address" type="text"
                                                placeholder="Type the detail address of the venue" class="form-control"
                                                title="address" />
                                        </div>
                                        <div class="form-group">
                                            <label for="phone">Contact Number</label>
                                            <input name="phone" id="phone" type="number"
                                                placeholder="Type the contact number of the venue" class="form-control"
                                                title="phone" />
                                        </div>
                                        <div class="form-group">
                                            <label for="type">Choose Type <span style="color: red;">*</span></label>
                                            <select id="type" class="selectVenue searchable_select form-control"
                                                name="type">
                                                <option value="0" selected>Offline</option>
                                                <option value="1">Online</option>
                                                <option value="2">Hybrid</option>
                                            </select>
                                        </div>

                                        <div class="form-group">
                                            <label for="category">Choose Category <span
                                                    style="color: red;">*</span></label>
                                            <select id="category" class="selectVenue searchable_select form-control"
                                                name="category">
                                                <option value="0" selected>Permanent</option>
                                                <option value="1">Temporary</option>
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label for="exp_date">Enter Expiration date</label>
                                            <input name="exp_date" id="exp_date" type="text"
                                                placeholder="expiration date" class="form-control" required />
                                        </div>
                                        <button type="submit" class="btn btn-primary" id="webSave" name="webSave"
                                            value="Create">Save</button>
                                    </div>
                                </form>
                            </div>
                            <div class="tab-pane fade" id="custom-tabs-three-excel" role="tabpanel"
                                aria-labelledby="custom-tabs-three-excel-tab">
                                <div class="row">
                                    <div class="col-md-6 col-x-6 col-sm-6">
                                        <br><br><br>
                                        <form action="{{ route('allvenue.storeexcelvenue') }}" method="POST"
                                            enctype="multipart/form-data" id="excel_form">
                                            @csrf
                                            <fieldset>
                                                <legend>Import from Excel(.xls/.xlsx):</legend>
                                                <div class="form-group">
                                                    <label for="file">Choose Excel File</label>
                                                    <input type="file" name="file" id="ex_file"
                                                        class="form-control" accept=".xls, .xlsx" />
                                                </div>
                                                <button type="submit" class="btn btn-primary">Upload</button>
                                            </fieldset>
                                        </form>
                                        <!-- /.row (main row) -->
                                    </div>
                                    <div class="col-md-6 col-x-6 col-sm-6">
                                        <br><br><br>
                                        <fieldset>
                                            <legend>Download the Excel File Format:</legend>
                                            <div class="form-group">
                                                <a href={{ asset('storage/ExcelDataFormat/VenueFormat.xlsx') }}><img
                                                        src={{ asset('storage/ExcelDataFormat/excel-logo.png') }}
                                                        alt="Excel Logo" width="70" height="80"></a>
                                            </div>
                                        </fieldset>
                                        <!-- /.row (main row) -->
                                    </div>
                                </div>
                                <section class="content">
                                    <div class="container-fluid">
                                        <div class="col-sm-12">
                                            <div class="row" id="venue_table_head" style="visibility: hidden;">
                                                <div class="col-sm-12">
                                                    <h3 id="" class="text-center">Venue Data</h3>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-sm-12">
                                                    <table id="venue_table" class="table table-bordered table-responsive"
                                                        style="visibility: hidden;">
                                                        <thead>
                                                            <tr>
                                                                <th>SL.</th>
                                                                <th>Venue</th>
                                                                <th>Status</th>
                                                                <th>Coordinator Name</th>
                                                                <th>Email</th>
                                                                <th>Email Status</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody name="incorrect_table_body" id="incorrect_table_body">
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </section>
                            </div>
                        </div>
                    </div>
                    <!-- /.row (main row) -->
                </div>
                <!-- /.container-fluid -->
            </div>
        </div>
    </section>
    <!-- /.content -->
@endsection
@push('js')
    <script>
        $(document).ready(function() {
            $('select[name="zone_id"]').on('change', function() {
                var zone_id = $(this).val();
                if (zone_id) {
                    let url = "{{ route('get_district_zone', ['zone_id' => ':zone_id']) }}";
                    $.ajax({
                        url: url.replace(':zone_id', zone_id),
                        type: "GET",
                        dataType: "json",
                        beforeSend: function() {
                            $('#wait').show();
                        },
                        success: function(data) {
                            $('#wait').hide();
                            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);
                        },
                        error: function(xhr, status, error) {
                            $('#wait').hide();
                            Swal.fire({
                                type: 'error',
                                title: 'Oops...',
                                text: 'Something went wrong!',
                            });
                        },
                        complete: function() {
                            $('#wait').hide();
                        }
                    });
                }
            });
            $('select[name="district_id"]').on('change', function() {
                var district_id = $(this).val();
                if (district_id) {
                    let url = "{{ route('get_upazila', ['district_id' => ':district_id']) }}";
                    $.ajax({
                        url: url.replace(':district_id', district_id),
                        type: "GET",
                        dataType: "json",
                        beforeSend: function() {
                            $('#wait').show();
                        },
                        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);
                        },
                        error: function(xhr, status, error) {
                            $('#wait').hide();
                            Swal.fire({
                                type: 'error',
                                title: 'Oops...',
                                text: 'Something went wrong!',
                            });
                        },
                        complete: function() {
                            $('#wait').hide();
                        }
                    });
                }
            });
            // Initially hide expiration date
            $('#exp_date').closest('.form-group').hide();

            // On category change
            $('#category').on('change', function() {
                if ($(this).val() === '1') {
                    $('#exp_date').closest('.form-group').show();
                } else {
                    $('#exp_date').closest('.form-group').hide();
                }
            });
            $('#webSave').click(function(e) {
                e.preventDefault();
                var name = $('#name').val();
                var zone_id = $('#selectZone').val();
                var district_id = $('#selectDistrict').val();
                var upazila_id = $('#upazila_id').val();
                var address = $('#address').val();
                var phone = $('#phone').val();
                var type = $('#type').val();
                var exp_date = $('#exp_date').val();
                var category = $('#category').val();
                // Validations
                if (name == '' || name == null || name == undefined) {
                    Swal.fire({
                        type: 'error',
                        title: 'Oops...',
                        text: 'Please enter the venue name!',
                    });
                    return;
                } else if (zone_id == '' || zone_id == null || zone_id == undefined) {
                    Swal.fire({
                        type: 'error',
                        title: 'Oops...',
                        text: 'Please select the zone!',
                    });
                    return;
                } else if (district_id == '' || district_id == null || district_id == undefined) {
                    Swal.fire({
                        type: 'error',
                        title: 'Oops...',
                        text: 'Please select the district!',
                    });
                    return;
                } else if (upazila_id == '' || upazila_id == null || upazila_id == undefined) {
                    Swal.fire({
                        type: 'error',
                        title: 'Oops...',
                        text: 'Please select the upazila!',
                    });
                    return;
                } else if (type == '' || type == null || type == undefined) {
                    Swal.fire({
                        type: 'error',
                        title: 'Oops...',
                        text: 'Please select the type!',
                    });
                    return;
                } else if (category == '' || category == null || category == undefined) {
                    Swal.fire({
                        type: 'error',
                        title: 'Oops...',
                        text: 'Please select the category!',
                    });
                    return;
                }
                if (category == 1) {
                    if (exp_date == '' || exp_date == null || exp_date == undefined) {
                        Swal.fire({
                            type: 'error',
                            title: 'Oops...',
                            text: 'Expiration date is mandatory for temporary venue!',
                        });
                        return;
                    }
                }
                Swal.fire({
                    title: "Are you sure?",
                    text: "You're about to create a new venue!",
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: "Yes, create it!",
                    cancelButtonText: "No, cancel!",
                }).then((result) => {
                    if (result) {
                        $.ajax({
                            url: "{{ route('allvenue.store') }}",
                            type: 'POST',
                            data: {
                                name: name,
                                zone_id: zone_id,
                                district_id: district_id,
                                upazila_id: upazila_id,
                                address: address,
                                phone: phone,
                                type: type,
                                exp_date: exp_date,
                                category: category,
                            },
                            beforeSend: function() {
                                $('#wait').show();
                            },
                            success: function(data) {
                                $('#wait').hide();
                                Swal.fire({
                                    type: "success",
                                    title: "Success",
                                    text: "New Venue Created Successfully!",
                                });
                            },
                            error: function(xhr, status, error) {
                                $('#wait').hide();

                                if (xhr.status === 422) {
                                    // Laravel validation error
                                    let errors = xhr.responseJSON.errors;
                                    let errorMessages = '';

                                    // Loop through error messages
                                    $.each(errors, function(key, value) {
                                        errorMessages += '• ' + value[0] +
                                            '<br>';
                                    });

                                    Swal.fire({
                                        type: 'error',
                                        title: 'Validation Error',
                                        html: errorMessages,
                                    });
                                } else {
                                    // Other types of errors
                                    Swal.fire({
                                        type: 'error',
                                        title: 'Oops...',
                                        text: 'Something went wrong!',
                                    });
                                }
                            },
                            complete: function() {
                                $('#wait').hide();
                            }
                        });
                    } else {
                        Swal.fire({
                            type: 'error',
                            title: "Operation Cancelled",
                            text: "New Venue not created!",
                        });
                    }
                });
            })
            $('#excel_form').submit(function(e) {
                e.preventDefault();
                var formData = new FormData(this);
                if (document.getElementById("ex_file").files.length > 0) {
                    Swal.fire({
                        title: 'Are you sure?',
                        text: "The venue file will be uploaded!",
                        type: 'question',
                        showCancelButton: true,
                        confirmButtonText: 'Yes, Upload it!',
                        cancelButtonText: 'No, Cancel!',
                        reverseButtons: true
                    }).then((result) => {
                        if (result.value) {
                            $.ajax({
                                type: 'POST',
                                url: "{{ route('allvenue.storeexcelvenue') }}",
                                data: formData,
                                cache: false,
                                contentType: false,
                                processData: false,
                                success: (data) => {
                                    this.reset();
                                    Swal.fire(
                                        'Uploaded!',
                                        'Your file has been uploaded.',
                                        'success'
                                    );

                                    var iterator = 1;
                                    // $("#venue_table tr").remove();
                                    // incorrectTeacherInfo = data['returnedVenueData'];
                                    for (var i = 0; i < data['returnedVenueData']
                                        .length; i++) {
                                        var tr = '<tr>';
                                        tr = tr + '<td>' + iterator++ + '</td>';
                                        tr = tr + '<td>' + data['returnedVenueData'][i][
                                            0
                                        ] + '</td>';
                                        tr = tr + '<td>' + data['returnedVenueData'][i][
                                            1
                                        ] + '</td>';
                                        tr = tr + '<td>' + data['returnedVenueData'][i][
                                            2
                                        ] + '</td>';
                                        tr = tr + '<td>' + data['returnedVenueData'][i][
                                            3
                                        ] + '</td>';
                                        tr = tr + '<td>' + data['returnedVenueData'][i][
                                            4
                                        ] + '</td>';
                                        tr = tr + '</tr>';
                                        $('#incorrect_table_body').append(tr);
                                    }
                                    iterator = 1;
                                    $("#venue_table").css('visibility', 'visible');
                                    $("#venue_table_head").css('visibility', 'visible');
                                    $("#venue_table").DataTable({
                                        "responsive": true,
                                        "lengthChange": false,
                                        "autoWidth": false,
                                        "buttons": ["copy", "excel", "print"]
                                    }).buttons().container().appendTo(
                                        '#venue_table');
                                },
                                error: function(data) {
                                    Swal.fire({
                                        title: '<strong>Sorry, File cannot be uploaded</strong>',
                                        type: 'error',
                                        html: 'Problem: ' + data.responseJSON
                                            .error +
                                            '</br> Please resolve the problem and try again!',
                                        showCloseButton: true
                                    });
                                }
                            });
                        } else if (result.dismiss === Swal.DismissReason.cancel) {
                            Swal.fire(
                                'Cancelled',
                                'Your file is not uploaded',
                                'error'
                            )
                        }
                    })
                } else {
                    Swal.fire(
                        'Cancelled',
                        'Please choose an excel file to upload',
                        'error'
                    )
                }
            });
        });
        window.onload = function() {
            $(function() {
                $("#exp_date").datepicker({
                    dateFormat: "dd/mm/yy"
                });
            });
        };
    </script>
@endpush