@extends('reachassuree_admin/layouts.main')
@section('title', $data['title'])
@section('content')

<style>
    .row{
        align-items: center;
    }
     .dataTables_scrollBody {
        position: relative;
        overflow: auto;
        width: 100%;
        max-height: 496px;
        height: 413px !important;
    }
    ::-webkit-scrollbar {
        width: 16px;
    }

    ::-webkit-scrollbar-thumb {
        background-color: #d6dee1;
        border-radius: 20px;
        border: 6px solid transparent;
        background-clip: content-box;
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: #a8bbbf;
    }

    ::-webkit-scrollbar-track {
        background-color: transparent;
    }

    .pos-middle {
        vertical-align: middle;
    }

    @media only screen and (max-width: 575px) {
        .page-title-right {
            text-align: center;
        }

        div#datatable_length {
            text-align: right;
        }

        div#datatable_filter {
            text-align: right;
        }

        .mb-3.d-flex {
            width: 200px;
            margin: 0 0 0 auto;
        }
    }

    @media only screen and (max-width: 680px) {
        .page-title-right {
            text-align: center;
        }

        div#datatable_filter {
            text-align: right;
        }

        .mb-3.d-flex {
            width: 200px;
            margin: 0 0 0 auto;
        }

        div#datatable_length {
            text-align: right;
        }

        div#datatable_length {
            text-align: left;
        }
    }

    .user tr td {
        padding: 5px 10px;
    }

    #user-email-check {
        display: block !important;
    }

    #user_username_check {
        display: block !important;
    }

    .client-tr .page-title-box {
        padding-bottom: 12px;
    }

    .addGraphics a,
    .addBackGrounds a {
        color: #ffff;
    }
</style>

<div class="page-content client-tr">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                    @include('../reachassuree_admin/comman/header')
                    <div class="col-md-1">
                        <button class="btn btn-primary form-control" onclick="return addGreetingFestivals()" type="button"> + Add</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="card">
                <div class="card-body">
                    <br>
                    <div class="table-responsive">
                        <table id="datatable" class="table align-middle table-nowrap table-striped display nowrap w-100 user">
                            <thead class="table-light">
                                @csrf
                                <tr>
                               
                                    <th>Id</th>
                                    <th>Name</th>
                                    <th>Date</th>
                                    <th>Type</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                        @csrf
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modalGreetingFestivals" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="modalGreetingFestivalsLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalGreetingFestivalsLabel">Greeting Festivals</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <form id="greetingFestivalForm" action="{{ route('greeting.festivals.save') }}" method="POST" class="needs-validation" novalidate>
                @csrf
                <input type="hidden" class="form-control" id="greeting_festival_id" name="greeting_festival_id" value=""> 
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="festivals_date" class="form-label">Date<span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="festivals_date" name="festivals_date" placeholder="dd-mm-yyyy" value="" required autocomplete="off">
                            </div>
                        </div>
                          <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="type" class="form-label">Type<span class="text-danger">*</span></label>
                                    <select class="form-select select2-ajax" id="type" name="type" required="">
                                        {{-- <option selected="" disabled="" value="">Choose...</option> --}}
                                        <option value="Festival">Festival</option>
                                        <option value="Day">Day</option>
                                        <option value="Wish">Wish</option>
                                        <option value="Quote">Quote</option>
                                    </select>
                                    <div class="invalid-feedback">Please select a valid type.</div>
                                </div>
                            </div>
                       
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="name" class="form-label">Name<span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="name" name="name" value="" required placeholder="Enter name" autocomplete="off">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                        <label for="festival_img" class="form-label">Image<span class="text-danger image-required">*</span></label>
                                        <input type="file" class="form-control" name="festival_img" id="festival_img" required accept="image/jpeg, image/png, image/jpg">
                                </div>
                            </div>
                        </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary px-3" id="btnSave">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="modalGreetingFestivalsGraphics" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="modalGreetingFestivalsGraphicsLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalGreetingFestivalsGraphicsLabel">Greeting Festivals</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
                <form id="greetingFestivalGraphicsForm" action="{{ route('greeting.festivals.graphics.save') }}" method="POST" class="needs-validation" novalidate>
                    @csrf                    
                    <input type="hidden" name="greeting_festival_id" id="festival_id" value="">
                    <div class="row">
                        <div class="col-md-10">
                            <label for="img" class="form-label">Image<span class="text-danger">*</span></label>
                            <input type="file" class="form-control" id="img" name="img" placeholder="Image" required>
                        </div>

                        <div class="col-md-2">
                            <label for="btnSave" class="form-label">&nbsp;&nbsp;</label>
                            <button type="submit" class="btn btn-primary px-3 form-control float-end" id="btnSave">Save</button>
                        </div>
                    </div>
                </form>
            
                <hr>

                <div class="row">
                    <div class="card">
                        <div class="card-body">
                            <div class="table-responsive">
                                <table id="datatableGraphics" class="table align-middle table-nowrap table-hover table-striped dt-responsive nowrap w-100">
                                    <thead>
                                        <tr>
                                            <th>Id</th>
                                            <th>Image</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                                @csrf
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                </div>
            </div>

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

<div class="modal fade" id="modalGreetingBackgrounds" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="modalGreetingFestivalsBackgroundsLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalGreetingFestivalsBackgroundsLabel">Greeting Festivals</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
                <form id="greetingFestivalBackgroundsForm" action="{{ route('greeting.festivals.background.save') }}" method="POST" class="needs-validation" novalidate>
                    @csrf                    
                    <input type="hidden" name="greeting_festival_id" id="background_festival_id" value="">
                    <div class="row">
                        <div class="col-md-10">
                            <label for="img" class="form-label">Image<span class="text-danger">*</span></label>
                            <input type="file" class="form-control" id="img" name="img" placeholder="Image" required>
                        </div>

                        <div class="col-md-2">
                            <label for="btnSave" class="form-label">&nbsp;&nbsp;</label>
                            <button type="submit" class="btn btn-primary px-3 form-control float-end" id="btnSave">Save</button>
                        </div>
                    </div>
                </form>
            
                <hr>

                <div class="row">
                    <div class="card">
                        <div class="card-body">
                            <div class="table-responsive">
                                <table id="datatableBackgrounds" class="table align-middle table-nowrap table-hover table-striped dt-responsive nowrap w-100">
                                    <thead>
                                        <tr>
                                            <th>Id</th>
                                            <th>Image</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                                @csrf
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                </div>
            </div>

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

@endsection

@section('custom-scripts')
<script src="{{ asset('assets/js/pages/jquery.form.js') }}"></script>
<script src="{{ asset('assets/js/pages/kendo.all.min.js') }}"></script>
<script src="{{ asset('assets/libs/parsleyjs/parsley.min.js') }}"></script>
<script src="{{ asset('assets/js/pages/form-validation.init.js') }}?v=2"></script>

<script type="text/javascript">
    var ajaxURL = "{{ route('greeting.festivals.ajax') }}";
    var ajaxURLDelete = "{{ route('delete.festivals') }}";
    var csrfToken = $("[name=_token").val();
    var addForm = "{{route('greeting.festivals')}}";
    var edit = "{{route('greeting.festivals.edit')}}";

    var table = $('#datatable').DataTable({
        "aoColumnDefs": [{"bSortable": false,"aTargets": [0]}],
        "order": [[2, 'desc']],
        "processing": true,
        "serverSide": true,
        "scrollX": true,
        "scrollY": function() {return $(window).height() - 320;},
        "lengthMenu": [[10, 50, 100, 150],[10, 50, 100, 150]],
        "language": {"processing": '<button type="button" class="btn btn-dark waves-effect waves-light"><i class="bx bx-loader bx-spin font-size-16 align-middle me-2"></i> Processing...</button>'},
        "ajax": {
            "url": ajaxURL,
            "type": "POST",
            "data": {"_token": csrfToken,}
        },
        "aoColumns": [
            {"mData": "id"},
            {"mData": "name"},
            {"mData": "festivals_date"},
            {"mData": "type"},
            {"mData": "action"},
        ]
    });
            
    $("#festivals_date").datepicker({
        format: "dd-mm-yyyy",
        container: "#modalGreetingFestivals",
       
        // todayHighlight:new Date()
    }).on('changeDate', function() {
        $('.datepicker').hide();
    });

    $("#type").select2({placeholder:"select type"});

    $(document).keydown(function(e) {
        var code = e.keyCode || e.which;

        if (code == 27) {
            $("#modalGreetingFestivals").modal('hide');
        }
    });
  
    $(document).ready(function() {
        var options = {
            beforeSubmit: showRequest, // pre-submit callback
            success: showResponse // post-submit callback
        };

        // bind form using 'ajaxForm'
         $('#greetingFestivalForm, #greetingFestivalGraphicsForm, #greetingFestivalBackgroundsForm').submit(function() {
            $(this).ajaxSubmit(options);
            return false;
        });
    });

    function showRequest(formData, jqForm, options) {
        showLoader();

        var queryString = $.param(formData);
        return true;
    }

    // post-submit callback
    function showResponse(responseText, statusText, xhr, $form) {
        hideLoader();
        
        if (responseText['status'] == 1) {
            toastr["success"](responseText['msg']);

            if(responseText['msg'] == "Graphics inserted successfully"){
                $('#greetingFestivalGraphicsForm').trigger("reset").removeClass('was-validated');
                $('#datatableGraphics').DataTable().ajax.reload(null, false);

            }else if(responseText['msg'] == "Festival saved successfully"){
                // window.location = addForm;
                resetInputForm();
                $("#btnSave").html('Insert');
    
                $("#modalGreetingFestivals").modal('hide');    
                $('#datatable').DataTable().ajax.reload(null, false);

            }else{
                $('#greetingFestivalBackgroundsForm').trigger("reset").removeClass('was-validated');
                $('#datatableBackgrounds').DataTable().ajax.reload(null, false);
            }

        } else if (responseText['status'] == 0) {
            if (typeof responseText['data'] !== "undefined") {
                var size = Object.keys(responseText['data']).length;
                if (size > 0) {
                    for (var [key, value] of Object.entries(responseText['data'])) {
                        toastr["error"](value);
                    }
                }
            } else {
                toastr["error"](responseText['msg']);
            }
        }
    }

    function resetInputForm() {
        $("#greetingFestivalForm").trigger("reset").removeClass('was-validated');
        $("#type").val('').trigger('change');
        $('#greeting_festival_id').val('');                
    }

    function addGreetingFestivals() {
        resetInputForm();
        $("#modalGreetingFestivals").modal('show');        

        $('.image-required').removeClass('d-none');
        $('#festival_img').attr('required',true);
    }

    function Delete(id) {
        swal.fire({
        title: "Are you sure want to delete this?",
        text: "You won't be able to revert this!",
        showCancelButton: true,
        confirmButtonColor: "#526BDF",
        cancelButtonColor: "#EC6767",
        confirmButtonText: "Yes, delete it!",
        cancelButtonText: "No, cancel it!",
        }).then((result) => {
        if (result.isConfirmed) {
            remove(id);
        }
        });
    }

    function remove(id) {
        $.ajax({
        type: 'GET',
        url: ajaxURLDelete + "?id=" + id,
        success: function(resultData) {
            if (resultData['status'] == 1) {
            toastr["success"](resultData['msg']);
            $('#datatable').DataTable().ajax.reload(null, false);
            }
        }
        });
    }

    function openEditModal(id) {
        // resetInputForm();
        $('#modalGreetingFestivals').modal('show');
        $('.image-required').addClass('d-none');
        $('#festival_img').attr('required',false);

        $.ajax({
            url: edit + "?id=" + id,
            type: 'GET',
            success: function(response) {
                var greetingFestival = response.data;

                $('#greeting_festival_id').val(greetingFestival.id);
                $('#name').val(greetingFestival.name);
                $('#festivals_date').val(greetingFestival.festivals_date);
                $('#type').val(greetingFestival.type).trigger('change');
            },
            error: function(xhr, status, error) {
                console.error(error);
                // Handle errors if needed
            }
        });
    }
</script>

<script type="text/javascript">
    function addGraphics(id, festivalName) {
        $('#greetingFestivalGraphicsForm').trigger("reset").removeClass('was-validated');
        $("#modalGreetingFestivalsGraphics").modal('show');

        $("#festival_id").val(id);
        $("#modalGreetingFestivalsGraphicsLabel").html("Greeting Festival " + festivalName);

        $('#datatableGraphics').DataTable().clear().destroy();

        var csrfToken = $("[name=_token]").val();

        setTimeout(function() {
            var table = $('#datatableGraphics').DataTable({
                "aoColumnDefs": [{"bSortable": false,"aTargets": []}],
                "order": [[0, 'desc']],
                "processing": true,
                "serverSide": true,
                "scrollX": true,
                "scrollY": function() {return $(window).height() - 320;},
                "language": {"processing": '<button type="button" class="btn btn-dark waves-effect waves-light"><i class="bx bx-loader bx-spin font-size-16 align-middle me-2"></i> Processing...</button>'},
                "ajax": {
                    "url": '{{route("graphics.ajax")}}',
                    "type": "POST",
                    "data": {
                        "_token": csrfToken,
                        id: id,
                    }
                },
                "aoColumns": [
                    {"mData": "id"},
                    {"mData": "image_path"},
                    {"mData": "action"},
                ]
            });

        }, 200);
    }

    function DeleteGraphics(id) {
        swal.fire({
            title: "Are you sure want to delete this?",
            text: "You won't be able to revert this!",
            showCancelButton: true,
            confirmButtonColor: "#526BDF",
            cancelButtonColor: "#EC6767",
            confirmButtonText: "Yes, delete it!",
            cancelButtonText: "No, cancel it!",
        }).then((result) => {
            if (result.isConfirmed) {
                removeGraphics(id);
            }
        });
    }

    function removeGraphics(id) {
        $.ajax({
            type: 'GET',
            url: "{{ route('delete.graphics') }}" + "?id=" + id,
            success: function(resultData) {
                if (resultData['status'] == 1) {
                    toastr["success"](resultData['msg']);
                    $('#datatableGraphics').DataTable().ajax.reload(null, false);
                }
            }
        });
    }
</script>

<script type="text/javascript">
    function addBackGrounds(id, festivalName) {
        $('#greetingFestivalBackgroundsForm').trigger("reset").removeClass('was-validated');
        $("#modalGreetingBackgrounds").modal('show');

        $("#background_festival_id").val(id);
        $("#modalGreetingFestivalsBackgroundsLabel").html("Greeting Festival " + festivalName);

        $('#datatableBackgrounds').DataTable().clear().destroy();

        var csrfToken = $("[name=_token]").val();

        setTimeout(function() {
            var table = $('#datatableBackgrounds').DataTable({
                "aoColumnDefs": [{"bSortable": false,"aTargets": []}],
                "order": [[0, 'desc']],
                "processing": true,
                "serverSide": true,
                "scrollX": true,
                "scrollY": function() {return $(window).height() - 320;},
                "language": {"processing": '<button type="button" class="btn btn-dark waves-effect waves-light"><i class="bx bx-loader bx-spin font-size-16 align-middle me-2"></i> Processing...</button>'},
                "ajax": {
                    "url": '{{route("background.ajax")}}',
                    "type": "POST",
                    "data": {
                        "_token": csrfToken,
                        id: id,
                    }
                },
                "aoColumns": [
                    {"mData": "id"},
                    {"mData": "image_path"},
                    {"mData": "action"},
                ]
            });

        }, 200);
    }

    function DeleteBackground(id) {
        swal.fire({
            title: "Are you sure want to delete this?",
            text: "You won't be able to revert this!",
            showCancelButton: true,
            confirmButtonColor: "#526BDF",
            cancelButtonColor: "#EC6767",
            confirmButtonText: "Yes, delete it!",
            cancelButtonText: "No, cancel it!",
        }).then((result) => {
            if (result.isConfirmed) {
                removeBackGround(id);
            }
        });
    }

    function removeBackGround(id) {
        $.ajax({
            type: 'GET',
            url: ajaxURLDelete + "?id=" + id,
            success: function(resultData) {
                if (resultData['status'] == 1) {
                    toastr["success"](resultData['msg']);
                    $('#datatableBackgrounds').DataTable().ajax.reload(null, false);
                }
            }
        });
    }
</script>
@endsection