@extends('layouts.app',[
    'title'=>'Konsultasi'
])
@push('styles')
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

    <style>
        .grid-container {
        display: grid;
        gap: 1rem; /* Adjust the gap between grid items */
        }

        /* For large screens (desktops) - 5 columns */
        @media (min-width: 1200px) {
        .grid-container {
            grid-template-columns: repeat(5, 1fr);
        }
        }

        /* For medium screens (tablets) - 3 columns */
        @media (min-width: 768px) and (max-width: 1199px) {
        .grid-container {
            grid-template-columns: repeat(3, 1fr);
        }
        }

        /* For small screens (mobile) - 1 column */
        @media (max-width: 767px) {
        .grid-container {
            grid-template-columns: 1fr;
        }
        }

        /* Optional: for some basic styling of the grid items */
        .grid-item {
        background-color: #f4f4f4;
        padding: 1.5rem;
        text-align: center;
        border: 1px solid #ddd;
        }

        .grid-container-auto {
        display: grid;
        gap: 1rem;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        }
        </style>
@endpush
@push('scripts')
    <script type="text/javascript" src="https://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() {
            $('#daterange').daterangepicker({
                opens: 'right',
                locale: {
                    format: 'DD/MM/YYYY'
                },
                showCustomRangeLabel: true,
                alwaysShowCalendars: true,
                ranges: {
                    'Hari Ini': [moment(), moment()],
                    'Kemarin': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    '7 Hari Terakhir': [moment().subtract(6, 'days'), moment()],
                    '1 Bulan Terakhir': [moment().subtract(29, 'days'), moment()],
                    'Bulan Ini': [moment().startOf('month'), moment().endOf('month')],
                    'Bulan Terakhir': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1,
                        'month').endOf('month')],
                    'Semua Waktu': [moment().subtract(10, 'year'), moment().add(10, 'year')]
                }
            }, function(start, end, label) {

                console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end
                    .format('YYYY-MM-DD'));
                var delayInMilliseconds = 500; //1 second

                setTimeout(function() {
                    $("#filter-form").submit();
                }, delayInMilliseconds);

            });
        });
    </script>
    @php
        $cek = $metaPixels->where('target_page','konsultasi.index')->where('target_element',".service-masuk")->first();
    @endphp

    @if ($cek)
        <script>
            
            $(document).on('click','table .service-masuk a',function(){
                event.preventDefault();
                fbq('init', `{{ $cek->pixel_id }}`);
                fbq('track', `{{ $cek->pixel_event }}`);
                const nextUrl = $(this).attr('href');
                setTimeout(function() {
                    window.location.href = nextUrl;
                }, 200);
            });
        </script>
    @endif

    @php
        $cek = $metaPixels->where('target_page','konsultasi.index')->where('target_element',".sudah-direspon")->first();
    @endphp

    @if ($cek)
        <script>
            
            $(document).on('click','table .sudah-direspon a',function(){
                event.preventDefault();
                fbq('init', `{{ $cek->pixel_id }}`);
                fbq('track', `{{ $cek->pixel_event }}`);
                const nextUrl = $(this).attr('href');
                setTimeout(function() {
                    window.location.href = nextUrl;
                }, 200);
            });
        </script>
    @endif
@endpush
@section('content')
    <style>
        .btn-active {
            background-color: #a88b42;
            color: white !important;
        }

        .btn-inactive {
            background-color: #E9C46A;

            color: white !important;
        }
    </style>
    <div class="container-fluid">
        <div class="block-header">
            <h2>Konsultasi</h2>
        </div>

        <div class="row clearfix">
            <!-- Task Info -->
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="card">
                    <div class="header">
                        <h3>Data Konsultasi</h3>
                    </div>
                    <div class="body">
                       
                        <div class="grid-container">
  <div class="info-box hover-zoom-effect">
                                    <div class="icon bg-blue">
                                        <i class="material-icons">refresh</i>
                                    </div>
                                    <div class="content">
                                        <div class="text">Pending Response</div>
                                        <div class="number">{{ $datas_process }}</div>
                                    </div>
                                </div>
                                <div class="info-box hover-zoom-effect">
                                    <div class="icon bg-green">
                                        <i class="material-icons">check_circle</i>
                                    </div>
                                    <div class="content">
                                        <div class="text">Service Masuk</div>
                                        <div class="number">{{ $datas_success }}</div>
                                    </div>
                                </div>
                                <div class="info-box hover-zoom-effect">
                                    <div class="icon bg-amber">
                                        <i class="material-icons">add_alert
                                        </i>
                                    </div>
                                    <div class="content">
                                        <div class="text">Sudah Direspon</div>
                                        <div class="number">{{ $datas_sudah_direspon }}</div>
                                    </div>
                                </div>
                                <div class="info-box hover-zoom-effect">
                                    <div class="icon bg-green">
                                        <i class="material-icons">format_list_bulleted
                                        </i>
                                    </div>
                                    <div class="content">
                                        <div class="text">Total Masuk</div>
                                        <div class="number">{{ $total_masuk }}</div>
                                    </div>
                                </div>
  <div class="info-box hover-zoom-effect">
                                    <div class="icon bg-purple">
                                        <i class="material-icons">data_usage
                                        </i>
                                    </div>
                                    <div class="content">
                                        <div class="text">Rasio Masuk</div>
                                        <div class="number">{{ number_format((float)$rasio_masuk, 2, '.', '') }} %</div>
                                    </div>
                                </div>
</div>
                        <form action="" id="filter-form">
                            <div class="row">

                                <div class="col-lg-3 col-md-3">
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <i class="material-icons">person</i>
                                        </span>
                                        <div class="form-line">
                                            
                                            <input class="form-control" placeholder="No.Konsultasi/Nama Pelanggan /No Telp"
                                                name="key" value="{{ $request->key }}">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-2 col-md-3">
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <i class="material-icons">card_membership</i>
                                        </span>
                                        <div class="form-line focused">
                                            <select name="status" class="form-control">
                                                <option value="" selected> Semua Status </option>
                                                <option value="Process"> Process </option>
                                                <option value="Service Masuk"> Service Masuk </option>
                                                <option value="Sudah Direspon"> Sudah direspon </option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-2 col-md-3">
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <i class="material-icons">date_range</i>
                                        </span>
                                        <div class="form-line">

                                            <input type="text" class="form-control" name="periode" id="daterange"
                                                value="@if (isset($periode)) {{ $periode[0] }} - {{ $periode[1] }} @endif">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-2 col-md-3">
                                    <div class="input-group">
                                        <button class="btn btn-primary">Cari</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <div class="table-responsive">
                            <table class="table table-hover dashboard-task-infos">
                                <thead>
                                    <tr>
                                        <th>No.Konsultasi</th>
                                        <th>Tanggal</th>
                                        <th>Nama Pelanggan</th>
                                        <th>No WA</th>
                                        <th>Kota/Kecamatan</th>
                                        <th style="min-width: 200px;">Alamat</th>
                                        <th>Merk & Tipe HP</th>
                                        <th style="min-width: 300px;">Keterangan</th>
                                        <th>Status Penyelesaian</th>
                                        <th>Pesan Follow-Up</th>
                                        @if (\Helper::hakAkses('Konsultasi', 'action'))
                                            <th>Action</th>
                                        @endif
                                        @if (\Helper::hakAkses('Konsultasi', 'pesan'))
                                            <th>Tools</th>
                                        @endif
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($datas as $key => $data)
                                        <tr>
                                            <td>{{ $data->no_konsultasi }}</td>
                                            <td>{{ date('d F Y', $data->created_at->timestamp) }}</td>
                                            <td>{{ $data->nama_pelanggan }}</td>
                                            <td>{{ $data->telp_pelanggan }}</td>
                                            <td>{{ $data->kota_kecamatan_pelanggan }}</td>
                                            <td>{{ $data->alamat_pelanggan }}</td>
                                            <td>{{ $data->merk_hp . ' ' . $data->tipe_hp }}</td>
                                            <td>{{ $data->keluhan }}</td>
                                            <td class="">
                                                @switch($data->status_penyelesaian)
                                                    @case('Process')
                                                        <span class="label label-info">Process</span>
                                                    @break

                                                    @case('Sudah Direspon')
                                                        <span class="label bg-amber"> Sudah Direspon </span>
                                                    @break

                                                    @case('Service Masuk')
                                                        <span class="label label-success">Service Masuk </span>
                                                    @break
                                                @endswitch
                                            </td>
                                            <td>
                                                <div style="display: flex; flex-direction: row; gap: 10px; padding: 10px;">
                                                    @php
                                                        if (isset($data->follow_up)) {
                                                            $array = explode(',', $data->follow_up);
                                                        } else {
                                                            $array = [];
                                                        }
                                                    @endphp
                                                    @foreach ($pesan_konsultasis as $p)
                                                        @if ($p->tampilkan)
                                                            <a href="{{ route('pesanKonsultasi', [$data->id, $p->id]) }}  "
                                                            class="btn btn-circle waves-effect waves-circle waves-float {{ in_array($p->id, $array) ? 'btn-active' : 'btn-inactive' }}"
                                                            style="margin: 5px; min-width:40px; min-height:40px; color:white!important;"
                                                            data-toggle="tooltip" data-placement="top"
                                                            title="{{ $p->nama_pesan }}">
                                                                <i class="material-icons">{{ $p->icon_pesan }}</i>
                                                            </a>
                                                        @endif
                                                    @endforeach
                                                    <a href="{{ route('pesan_konsultasi.index') }}"
                                                        class="btn btn-circle waves-effect waves-circle waves-float btn-inactive "
                                                        style="margin: 5px; min-width:40px; min-height:40px; color:white!important;"
                                                        data-toggle="tooltip" data-placement="top" title="Pengaturan Pesan">
                                                        <i class="material-icons">settings</i>
                                                    </a>

                                                </div>
                                            </td>
                                            @if (\Helper::hakAkses('Konsultasi', 'action'))
                                                {{-- @dd($data->status_penyelesaian) --}}
                                                <td>
                                                    <div class="btn-group btn-block">
                                                        <button type="button"
                                                            class="btn btn-default btn-block waves-effect dropdown-toggle"
                                                            data-toggle="dropdown" aria-haspopup="true"
                                                            aria-expanded="false">
                                                            Action <span class="caret"></span>
                                                        </button>
                                                        <ul class="dropdown-menu">
                                                            @if ($data->status_penyelesaian != 'Process')
                                                                <li class="bg-info service-masuk"><a
                                                                        href="{{ route('konsultasi.status', $data->id) }}?status=Process">Process</a>
                                                                </li>
                                                            @endif
                                                            @if ($data->status_penyelesaian != 'Service Masuk')
                                                                <li role="separator" class="divider"></li>
                                                                <li class="bg-success service-masuk"><a
                                                                        href="{{ route('konsultasi.status', $data->id) }}?status=Service%20Masuk">Service
                                                                        Masuk</a>
                                                                </li>
                                                            @endif
                                                            @if ($data->status_penyelesaian != 'Sudah Direspon')
                                                                <li role="separator" class="divider"></li>
                                                                <li class="bg-warning sudah-direspon"><a
                                                                        href="{{ route('konsultasi.status', $data->id) }}?status=Sudah%20Direspon">Sudah
                                                                        Direspon</a>
                                                                </li>
                                                            @endif

                                                        </ul>
                                                    </div>
                                                </td>
                                            @endif
                                            @if (\Helper::hakAkses('Konsultasi', 'action'))
                                                <td >
                                                    <div style="display: flex;gap:6px;">
                                                        <a href="https://wa.me/{{ '628' . substr($data->telp_pelanggan, 2) }}"
                                                        target="blank_" class="btn btn-success waves-effect"
                                                        style="margin-left : 5%;"><i class="material-icons">chat</i></a>
                                                    
                                                        <form action="{{ route('konsultasi.destroy', $data->id) }}"
                                                            method="POST" style="display:inline">
                                                            @csrf
                                                            @method('DELETE')
                                                            <button type="submit" class="btn btn-danger" id="hapus-button"><i
                                                                    class="material-icons">delete</i></button>
                                                        </form>
                                                    </div>
                                                </td>
                                            @endif
                                        </tr>
                                    @endforeach
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td>
                                            <div class="text-center">
                                                @include('layouts.includes.pagination')
                                            </div>
                                        </td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection