@extends('admin.layout')
@section('content')
    <div class="container-fluid">

        <div class="row justify-content-end g-2 pt-3 ">
            <div class="col-lg-auto  col-md-auto col-sm-auto col-auto my-auto">
                <h2 class="main_title">All Occasion</h2>
            </div>
            <div class="col-lg-auto  col-md-auto col-sm-auto col-auto ms-auto">
                <div class="form-group mb-0">
                    <select id="SMFilter" name="SMFilter" onchange="getRSMfilterDAta()"
                        class="select2 js-example-basic-single select-label form-control w-100">
                        <option value="" selected default disabled>Select SM</option>
                        @foreach ($UserFilterData as $userskey => $UserFilterData)
                            <option value="{{ $UserFilterData->position_code }}">{{ $UserFilterData->emp_name }}</option>
                        @endforeach
                    </select>
                </div>

            </div>
            <div class="col-lg-auto  col-md-auto col-sm-auto col-auto ">
                <div class="form-group mb-0">
                    <select class="select2 js-example-basic-single select-label form-control w-100" id="RSMFilter"
                        name="RSMFilter" onchange="getAMfilterDAta()">
                        <option value="" selected default disabled>Select RSM</option>
                    </select>
                </div>
            </div>
            <div class="col-lg-auto  col-md-auto col-sm-auto col-auto ">
                <div class="form-group mb-0">
                    <select class="select2 js-example-basic-single select-label form-control w-100" id="AMFilter"
                        name="AMFilter" onchange="getTMfilterDAta()">
                        <option value="" selected default disabled>Select AM</option>
                    </select>
                </div>
            </div>

            <div class="col-lg-auto  col-md-auto col-sm-auto col-auto ">
                <div class="form-group mb-0">
                    <select class="select2 js-example-basic-single select-label form-control w-100" id="TMFilter"
                        name="TMFilter">
                        <option value="" selected default disabled>Select TM</option>
                    </select>
                </div>
            </div>

            <div class="col-lg-auto  col-md-auto col-sm-auto col-auto">
                <select class="select2 js-example-basic-single select-label form-control w-100" id="selectOccasions"
                    name="selectOccasions">
                    <option default selected disabled value="">Select Occasion</option>
                    @foreach ($FetchAllOccasion as $key => $value)
                        <option value="{{ $value->occasion_type }}">{{ $value->occasion_type }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-lg-auto  col-md-auto col-sm-auto col-auto">
                <select class="select2 js-example-basic-single select-label form-control w-100" id="occasionStatus"
                    name="occasionStatus">
                    <option default selected disabled value="">Occasion Status</option>
                    <option value="InProgress">In-Progress</option>
                    <option value="Completed">Completed</option>
                    <option value="UploadPending">Upload Pending</option>
                </select>
            </div>

            <div class="col-lg-auto col-md-auto col-sm-auto  col-auto">
                <div class="d-flex align-items-center">
                    <div id="reportrange" class="daterange">
                        <i class="fa fa-calendar"></i>&nbsp;
                        <span>January 11, 2024 - February 9, 2024</span> <i class="fa fa-caret-down"></i>
                        <input type="hidden" name="dtFrom" id="dtFrom">
                        <input type="hidden" name="dtTo" id="dtTo">
                    </div>
                    <a id="applyButton" class="btn btn-primary ms-2"><i class="fa fa-search"></i></a>
                    <a id="clearButton" class="btn btn-danger ms-2"><i class="fa fa-times"></i></a>
                </div>
            </div>
            <div class="col-lg-auto  col-md-auto col-sm-auto col-auto">
                <a id="exportBtn" class="btn btn-success"><i class="fa fa-download me-2"></i>Export </a>
            </div>

        </div>
        <div class="row pt-3">
            <div class="col-12 pt-2">

                <div class="white_shadow_rs">
                    <table id="datatable" class="table table-striped data-table-dr" style="width:100%">
                        <thead>
                            <tr>
                                <th>Sr No</th>
                                <th>TM Name</th>
                                <th>Doctor Name</th>
                                <th>Doctor Images</th>
                                <th>Unique Code</th>
                                <th>Speciality</th>
                                <th>Occasion Name</th>
                                <th>Occasion Date</th>
                                <th>Generate Video</th>
                                <th>Video Status</th>
                                <th>Doctor URL</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>

        </div>


    </div>
@endsection
@section('js')
    <script>
        $(document).ready(function() {
            $(function() {
                $("#reportrange").daterangepicker({
                    autoUpdateInput: false,
                    ranges: {
                        Today: [moment(), moment()],
                        Yesterday: [
                            moment().subtract(1, "days"),
                            moment().subtract(1, "days"),
                        ],
                        "Last 7 Days": [moment().subtract(6, "days"), moment()],
                        "Last 30 Days": [moment().subtract(29, "days"), moment()],
                        "This Month": [
                            moment().startOf("month"),
                            moment().endOf("month"),
                        ],
                        "Last Month": [
                            moment().subtract(1, "month").startOf("month"),
                            moment().subtract(1, "month").endOf("month"),
                        ],
                    },
                });

                $("#reportrange").on("apply.daterangepicker", function(ev, picker) {
                    $(this)
                        .find("span")
                        .html(
                            picker.startDate.format("MMMM D, YYYY") +
                            " - " +
                            picker.endDate.format("MMMM D, YYYY")
                        );
                    $("#dtFrom").val(picker.startDate.format("YYYY-MM-DD"));
                    $("#dtTo").val(picker.endDate.format("YYYY-MM-DD"));
                    userTable.ajax.reload();
                });

            });

        });
    </script>
    <script>
        var userTable;
        $(function() {

            var columns = [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    searchable: false
                },
                {
                    data: 'emp_name',
                    name: 'emp_name'
                },
                {
                    data: 'doctor_name',
                    name: 'doctor_name'
                },
                {
                    data: 'upload_image',
                    name: 'upload_image'
                },
                {
                    data: 'doctor_unique_code',
                    name: 'doctor_unique_code'
                },
                {
                    data: 'speciality',
                    name: 'speciality'
                },
                {
                    data: 'occasion_type',
                    name: 'occasion_type'
                },
                {
                    data: 'occasion_date',
                    name: 'occasion_date'
                },
                {
                    data: 'occasion_video_status',
                    name: 'occasion_video_status'
                },
                {
                    data: 'video_status',
                    name: 'video_status'
                },
                {
                    data: 'genrated_link',
                    name: 'genrated_link'
                },
            ];

            var columnDefs = [];

            userTable = getdatatable("{{ route('adminmanagealloccasionpeginate') }}", columns, columnDefs);
            $('#applyButton').click(function() {
                userTable.draw();
            });

            $("#clearButton").click(function() {
                $("#dtFrom").val('');
                $("#dtTo").val('');
                $('#reportrange span').html('');
                $("#SMFilter").val('').change();
                $('#RSMFilter').html('<option value="" default selected disabled>Select RSM</option>');
                $('#AMFilter').html('<option value="" default selected disabled>Select AM</option>');
                $('#TMFilter').html('<option value="" default selected disabled>Select TM</option>');
                $("#selectOccasions").val('').change();
                $("#occasionStatus").val('').change();
                userTable.draw();
            });


        });

        function getdatatable(url, columns, columnDefs) {
            return $('#datatable').DataTable({
                processing: true,
                serverSide: true,
                bDestroy: true,
                fixedHeader: true,
                order: [],
                scrollX: true,
                columns: columns,
                columnDefs: columnDefs,
                ajax: {
                    method: 'POST',
                    url: url,
                    data: function(d) {
                        d._token = "{{ csrf_token() }}";
                        d.dtFrom = $("#dtFrom").val(),
                            d.dtTo = $("#dtTo").val(),
                            d.smPositionCode = $('#SMFilter option:selected').val(),
                            d.rsmPositionCode = $('#RSMFilter option:selected').val(),
                            d.amPositionCode = $('#AMFilter option:selected').val(),
                            d.tmPositionCode = $('#TMFilter option:selected').val(),
                            d.selectOccasions = $('#selectOccasions option:selected').val(),
                            d.occasionStatus = $('#occasionStatus option:selected').val();
                    }
                },
                "drawCallback": function(settings) {
                    new VenoBox({
                        selector: ".my-image-links",
                        numeration: true,
                        infinigall: true,
                        share: true,
                        spinner: 'plane'
                    });
                    new VenoBox({
                        selector: '.my-video-links',
                    });
                },
            });
        }

        function copyToClipboard(url) {
            navigator.clipboard.writeText(url).then(function() {
                $.notify("URL copied to clipboard!", "success");
            }, function(err) {
                $.notify("Failed to copy URL.", "error");
                console.error('Could not copy text: ', err);
            });
        }


        function copyToClipboardUrl(url) {
            if (url) {
                navigator.clipboard.writeText(url).then(function() {
                    $.notify("URL copied to clipboard!", "success");
                }, function(err) {
                    $.notify("Failed to copy URL.", "error");
                    console.error('Could not copy text: ', err);
                });
            } else {
                $.notify("No URL to copy.", "error");
            }
        }



        function getRSMfilterDAta() {
            $.ajax({
                url: "{{ route('getChidUserData') }}",
                type: "POST",
                data: {
                    position_code: $('#SMFilter option:selected').val(),
                    _token: '{{ csrf_token() }}'
                },
                success: function(result) {

                    $('#RSMFilter').html('<option value="" default selected disabled>Select RSM</option>');
                    $('#AMFilter').html('<option value="" default selected disabled>Select AM</option>');
                    $('#TMFilter').html('<option value="" default selected disabled>Select TM</option>');
                    $.each(result.data, function(key, value) {
                        $("#RSMFilter").append('<option value="' + value.position_code + '">' + value
                            .emp_name + '</option>');
                    });
                }
            })
        }

        function getAMfilterDAta() {
            $.ajax({
                url: "{{ route('getChidUserData') }}",
                type: "POST",
                data: {
                    position_code: $('#RSMFilter option:selected').val(),
                    _token: '{{ csrf_token() }}'
                },
                success: function(result) {
                    $('#AMFilter').html('<option value="" default selected disabled>Select AM</option>');
                    $('#TMFilter').html('<option value="" default selected disabled>Select TM</option>');
                    $.each(result.data, function(key, value) {
                        $("#AMFilter").append('<option value="' + value.position_code + '">' + value
                            .emp_name + '</option>');
                    });
                }
            })

        }

        function getTMfilterDAta() {
            $.ajax({
                url: "{{ route('getChidUserData') }}",
                type: "POST",
                data: {
                    position_code: $('#AMFilter option:selected').val(),
                    _token: '{{ csrf_token() }}'
                },
                success: function(result) {
                    $('#TMFilter').html('<option value="" default selected disabled>Select TM</option>');
                    $.each(result.data, function(key, value) {
                        $("#TMFilter").append('<option value="' + value.position_code + '">' + value
                            .emp_name + '</option>');
                    });
                }
            })
        }

        $('#exportBtn').click(function() {
            $.ajax({
                url: "{{ route('adminAllOccasionExport') }}",
                type: 'GET',
                data: {},
                xhrFields: {
                    responseType: 'blob'
                },
                success: function(response) {
                    var blob = new Blob([response], {
                        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                    });
                    var link = document.createElement('a');
                    link.href = window.URL.createObjectURL(blob);
                    link.download = 'All_Occasion_export.xlsx';
                    link.click();
                },
                error: function(xhr, status, error) {
                    console.error(error);
                }
            });
        });
    </script>
@endsection