@extends('users-area.layouts.app')

@section('title', 'Click Report')

@section('content')
    <div class="card bg-light-info shadow-none position-relative overflow-hidden">
        <div class="card-body px-4 py-3">
            <div class="row align-items-center">
                <div class="col-9">
                    <h4 class="fw-semibold mb-8">Report</h4>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item">
                                <a class="text-muted " href="{{ route('users-area.index') }}">Home</a>
                            </li>
                            <li class="breadcrumb-item" aria-current="page">
                                Click Report
                            </li>
                        </ol>
                    </nav>
                </div>
                <div class="col-3">
                    <div class="text-center mb-n5">
                        <img src="{{ asset('users-area-template/images/breadcrumb/ChatBc.png') }}" alt="" class="img-fluid mb-n4">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card card-body">
        <div class="row">
            <div class="col-md-8 col-xl-9">
                <div class="position-relative">
                    <input type="text" class="form-control filter-date">
                    <form>
                        <input type="date" name="start_date" class="start-date d-none" value="{{ \Carbon\Carbon::today()->format('Y-m-d') }}">
                        <input type="date" name="end_date" class="end-date d-none" value="{{ \Carbon\Carbon::today()->format('Y-m-d') }}">
                    </form>
                </div>
            </div>
            <div class="col-md-4 col-xl-3 text-end d-flex justify-content-md-end justify-content-center mt-3 mt-md-0">
                <button class="btn btn-info btn-filter d-flex align-items-center">
                    <i class="ti ti-filter text-white me-1 fs-5"></i> Filter
                </button>
                <button class="btn btn-success btn-export d-flex align-items-center ms-2">
                    <i class="ti ti-download text-white me-1 fs-5"></i> Export
                </button>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table w-100 search-table align-middle text-nowrap">
                    <thead class="header-item">
                        <th></th>
                        <th>Date</th>
                        <th>Outlet</th>
                        <th>Whatsapp</th>
                        <th>Instagram</th>
                        <th>Tiktok</th>
                        <th>Youtube</th>
                        <th>Facebook</th>
                        <th>Website</th>
                        <th>Google Review</th>
                        <th>Total Click</th>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
              </div>
        </div>
    </div>
@endsection
@push('script')
    <script src="{{ asset('users-area-template/libs/datatables.net/js/jquery.dataTables.min.js') }}"></script>
    <script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <script>
        $(function(){
            let datatable = $(".table").DataTable({
                "processing": true,
                "serverSide": true,
                "responsive": true,
                "language": {
                    "processing": `<div class="shadow p-3"><div class="spinner-border spinner-border-sm text-primary" role="status"></div> Processing...</div>`,
                },
                "order": [
                    [0, 'desc']
                ],
                "ajax": {
                    "url": '{{ route('users-area.report.click.datatables') }}',
                    "type": "GET",
                    "data" : function (d) {
                        d.start_date = $('.start-date').val()
                        d.end_date = $('.end-date').val()
                    }
                },
                "columns": [
                    {
                        data: 'created_at',
                        visible: false
                    },
                    {
                        data: 'created_at'
                    },
                    {
                        data: 'outlet_name'
                    },
                    {
                        data: 'whatsapp'
                    },
                    {
                        data: 'instagram'
                    },
                    {
                        data: 'tiktok'
                    },
                    {
                        data: 'youtube'
                    },
                    {
                        data: 'facebook'
                    },
                    {
                        data: 'website'
                    },
                    {
                        data: 'google_review'
                    },
                    {
                        data: 'total_click'
                    },
                ]
            })
            
            $('.filter-date').daterangepicker(
            {
                locale: {
                    format: 'DD MMMM YYYY'
                }
            }, 
            function(start, end, label) {
                $('.start-date').val(start.format('YYYY-MM-DD'))
                $('.end-date').val(end.format('YYYY-MM-DD'))
            });

            $('.btn-filter').on('click', function(){
                datatable.ajax.reload()
            })

            $('.btn-export').on('click', function(){
                datatable.ajax.reload()
                
                var link = document.createElement("a");
                link.href = '{{ route('users-area.report.click.export.excel') }}?' + $('form').serialize();
                link.target = "_blank";
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            })
        })
    </script>
@endpush

@push('css')
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <link rel="stylesheet" href="{{ asset('users-area-template/libs/datatables.net-bs5/css/dataTables.bootstrap5.min.css') }}">
    <style>.table-responsive { overflow-y: hidden; padding-bottom:20px}.dataTables_info{margin-bottom: 10px}.dataTables_filter{display: none}</style>
@endpush