@extends('layouts.app',[
    'title'=>'Konsultasi'
])
@php
        $trackingView = request()->trackingView ?? false;
        $canPesan = \Helper::hakAkses('pesan&followup', 'view');
    @endphp
@push('styles')
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <style>
        .btn-active {
            background-color: #a88b42;
            color: white !important;
        }

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

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

        .grid-container-center {
            display: grid;
            gap: 1rem; /* Adjust the gap between grid items */
            justify-content: center; /* Center the grid items horizontally */
        }

        .info-box.big {
            height: 200px;
        }

        .info-box.big .icon {
            width: 200px !important;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .info-box.big .content {
          
            display: flex;
            align-items: center;
        }

        .info-box.big .content .text {
          
            font-size: 2rem;
        }

        .info-box.big .content .number {
          
            font-size: 3rem;
        }

        .info-box.big .icon i {
            font-size: 12rem !important; /* Adjust icon size */
        }
        

        .grid-col-1 {
            grid-template-columns: repeat(1, 1fr);
        }

        .grid-col-2 {
            grid-template-columns: repeat(2, 1fr);
        }

        .grid-col-3 {
            grid-template-columns: repeat(3, 1fr);
        }

        .grid-col-4 {
            grid-template-columns: repeat(4, 1fr);
        }

        .grid-col-5 {
            grid-template-columns: repeat(5, 1fr);
        }

        .grid-col-6 {
            grid-template-columns: repeat(6, 1fr);
        }

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

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


            .grid-col-5 {
                grid-template-columns: repeat(3, 1fr);
            }

            .grid-col-6 {
                grid-template-columns: repeat(3, 1fr);
            }
        }

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

            .info-box.big {
                height: 150px;
            }

            .info-box.big .icon {
                width: 150px !important;
               
            }

            .info-box.big .content .text {
          
                font-size: 13px;
            }

            .info-box.big .content .number {
            
                font-size: 26px;
            }

            .info-box.big .icon i {
                font-size: 6rem !important; /* Adjust icon size */
            }
            

        }

        /* 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')


        {{-- modal to update tanggal jam booking --}}
    <div class="modal fade" id="updateBookingModal" tabindex="-1" role="dialog" aria-labelledby="updateBookingModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="updateBookingModalLabel">Update Tanggal dan Jam Booking</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="updateBookingForm">
                        @csrf
                        <input type="hidden" name="konsultasi_id" id="konsultasi_id">
                        <p>No Konsultasi : <span id="no_konsultasi"></span></p>
                        <p>Nama Pelanggan : <span id="nama_pelanggan"></span></p>
                        <p>Telp Pelanggan : <span id="telp_pelanggan"></span></p>
                        <div class="form-group">
                            <div class="input-group">
                                <div class="form-line">
                                    <label for="tanggal_booking">Tanggal Booking</label>
                                    <input type="date" class="form-control" id="tanggal_booking" name="tanggal_booking" required>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group">
                                <div class="form-line">
                                    <label for="jam_booking">Jam Booking</label>
                                <input type="time" class="form-control" id="jam_booking" name="jam_booking" required>
                                </div>
                            </div>
                            
                        </div>
                        <div class="d-flex">
                            <button type="submit" class="btn btn-success">Update</button>
                            @if($canPesan)
                                <a type="submit" class="btn btn-warning" href="{{ route('konsultasi.pesan-default') }}" target="_blank">Edit Notifikasi</a>
                                <a type="submit" class="btn btn-warning" href="{{ route('konsultasi.pesan-default-schedule.index') }}" target="_blank">Edit Pengingat</a>
                            @endif
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <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>

    

    @if ($trackingView)
        <script>
            //disable all tag a link and all button
            $(document).on('click', 'a, button', function(e) {
                e.preventDefault();
            });
        </script>
    @else
         <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);

                });
            });

            //when .booking-service click, get data konsultasi from attribute data-konsultasi, show modal with data no_konsultasi, nama_pelanggan, telp_pelanggan and form input for tanggal and jam booking
            $(document).on('click', '.booking-service', function() {
                event.preventDefault();
                const dataKonsultasi = JSON.parse($(this).attr('data-konsultasi'));
                
                $('#konsultasi_id').val(dataKonsultasi.id);
                $('#no_konsultasi').text(dataKonsultasi.no_konsultasi);
                $('#nama_pelanggan').text(dataKonsultasi.nama_pelanggan);
                $('#telp_pelanggan').text(dataKonsultasi.telp_pelanggan);
                var tanggalJamBooking = dataKonsultasi.tanggal_jam_booking ? dataKonsultasi.tanggal_jam_booking.split(' ') : [];

                $('#tanggal_booking').val(tanggalJamBooking[0] || '');
                $('#jam_booking').val(tanggalJamBooking[1] || '');
                $('#updateBookingModal').modal('show');
            });

            //submit updateBookingForm with ajax to konsultasi.updateBooking
            $('#updateBookingForm').on('submit', function(e) {
                e.preventDefault();
                //disable submit button

                const formEl = $(this);
                formEl.find('button[type="submit"]').prop('disabled', true);

                var formData = $(this).serialize();
                $.ajax({
                    url: "{{ route('konsultasi.updateBooking',':id') }}".replace(':id', $('#konsultasi_id').val()),
                    type: "POST",
                    data: formData,
                    success: function(response) {
                        $('#updateBookingModal').modal('hide');

                        $("#konsultasi-" + response.konsultasi.id + " .tanggal_jam_booking").text(response.konsultasi.tanggal_jam_booking);
                        $("#konsultasi-" + response.konsultasi.id + " .booking-service").data('konsultasi', JSON.stringify(response.konsultasi));
                        $("#konsultasi-" + response.konsultasi.id + " .status_penyelesaian").html('<span class="label label-primary">Booking Service</span>');
                        notyf.success(response.message);
                        formEl.find('button[type="submit"]').prop('disabled', false);
                    },
                    error: function(xhr, status, error) {
                        notyf.error("Error updating booking");
                        console.error("Error updating booking:", error);
                        formEl.find('button[type="submit"]').prop('disabled', false);
                    }
                });
            });
                
        </script>
    @endif
   
    <script>
        var targetElements = @json($metaPixels->where('target_page', 'konsultasi.index')->groupBy('target_element'));


        for (const t in targetElements) {
            if (Object.prototype.hasOwnProperty.call(targetElements, t)) {
                const pixels = targetElements[t];
                $(document).on('click', `${t} a`, function() {
                    event.preventDefault();
                    const nextUrl = $(this).attr('href');
                    for (const p in pixels) {
                        if (Object.prototype.hasOwnProperty.call(pixels, p)) {
                            const pixel = pixels[p];
                            if (pixel.source == "meta") {
                                //fbq('init', `${pixel.pixel_id}`);
                                fbq('trackCustom', `${pixel.pixel_event}`);
                            } else if (pixel.source == "tiktok") {
                                //ttq.load(`${pixel.pixel_id}`);
                                ttq.track(`${pixel.pixel_event}`);
                            } else if (pixel.source == "gtm") {
                                dataLayer.push({
                                    'event': `${pixel.pixel_event}`
                                });
                            }
                        }
                    }
                    console.log(nextUrl);
                    if(nextUrl != "" && nextUrl != "#" && nextUrl != undefined){
                        setTimeout(function() {
                            window.location.href = nextUrl;
                        }, 200);
                    }
                });

            }
        }

    </script>

@endpush
@section('content')

    

    
    <div class="container-fluid">
        <div class="block-header">
            <h2>Prospek/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 Prospek</h3>
                    </div>
                    <div class="body">

                        <div class="grid-container-center  grid-col-2">
                            <div class="info-box big hover-zoom-effect">
                                <div class="icon bg-green">
                                    <i class="material-icons">format_list_bulleted
                                    </i>
                                </div>
                                <div class="content">
                                    <div >
                                        <div class="text">Total Masuk</div>
                                        <div class="number">{{ $total_masuk }}</div>
                                    </div>
                                </div>
                            </div>
                            <div class="info-box big hover-zoom-effect">
                                <div class="icon bg-purple">
                                    <i class="material-icons">data_usage
                                    </i>
                                </div>
                                <div class="content">
                                    <div >
                                        <div class="text">Rasio Service Masuk</div>
                                        <div class="number">{{ number_format((float)$rasio_masuk, 2, '.', '') }} %</div>
                                    </div>
                                    
                                </div>
                            </div>
                        </div>
                       
                        <div class="grid-container grid-col-5">
                            <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">Belum Direspon</div>
                                    <div class="number">{{ $datas_process }}</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-blue">
                                    <i class="material-icons">date_range
                                    </i>
                                </div>
                                <div class="content">
                                    <div class="text">Booking Service</div>
                                    <div class="number">{{ $data_booking_service }}</div>
                                </div>
                            </div>
                            <div class="info-box hover-zoom-effect">
                                <div class="icon bg-red">
                                    <i class="material-icons">cancel
                                    </i>
                                </div>
                                <div class="content">
                                    <div class="text">Tidak Respon Lagi</div>
                                    <div class="number">{{ @$datas_tidak_direspon }}</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>
                        <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(request()->status == '')> Semua Status </option>
                                                <option value="Process" @selected(request()->status == 'Process')> Belum Direspon </option>
                                                <option value="Sudah Direspon" @selected(request()->status == 'Sudah Direspon')> Sudah direspon </option>
                                                <option value="Booking Service" @selected(request()->status == 'Booking Service')> Booking Service </option>
                                                <option value="Tidak Respon Lagi" @selected(request()->status == 'Tidak Respon Lagi')> Tidak Respon Lagi </option>
                                                <option value="Service Masuk" @selected(request()->status == 'Service Masuk')> Service Masuk </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>
                                        <th style="min-width: 100px;">Tanggal & Jam Booking</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 id="konsultasi-{{ $data->id }}">
                                            <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="status_penyelesaian">
                                                @switch($data->status_penyelesaian)
                                                   

                                                    @case('Process')
                                                        <span class="label label-info">Belum Direspon</span>
                                                    @break

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

                                                    @case('Booking Service')
                                                        <span class="label label-primary">Booking Service</span>
                                                    @break

                                                    @case('Tidak Respon Lagi')
                                                        <span class="label bg-red"> Tidak Respon Lagi </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
                                                    @if ($canPesan)
                                                        <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>
                                                    @endif

                                                </div>
                                            </td>
                                            <td class="tanggal_jam_booking">
                                                {{ $data->tanggal_jam_booking ?? "-" }}<br> 
                                                @if ($data->status_penyelesaian == "Booking Service" && $data->tanggal_jam_booking != null && strtotime($data->tanggal_jam_booking) < strtotime(date("Y-m-d H:i:s")))
                                                    <span class="label label-danger">
                                                        Lewat Jadwal
                                                    </span>
                                                @endif
                                            </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' || $trackingView)
                                                               
                                                                <li class="bg-info pending-respon"><a
                                                                        href="{{ route('konsultasi.status', $data->id) }}?status=Process">Belum Direspon</a>
                                                                </li>
                                                            @endif
                                                            @if ($data->status_penyelesaian != 'Sudah Direspon' || $trackingView)
                                                              
                                                                <li class="bg-warning sudah-direspon"><a
                                                                        href="{{ route('konsultasi.status', $data->id) }}?status=Sudah%20Direspon">Sudah
                                                                        Direspon</a>
                                                                </li>
                                                            @endif
                                                            @if ($data->status_penyelesaian != 'Tidak Respon Lagi' || $trackingView)
                                                                
                                                                <li class="bg-warning tidak-direspon"><a
                                                                        href="{{ route('konsultasi.status', $data->id) }}?status=Tidak%20Respon%20Lagi">
                                                                        Tidak Respon Lagi</a>
                                                                </li>
                                                            @endif
                                                           
                                                            <li class="booking-service" data-konsultasi='{{ json_encode($data) }}'><a
                                                                    href="#">Booking Service</a>
                                                            </li>
                                                            @if ($data->status_penyelesaian != 'Service Masuk' || $trackingView)
                                                                
                                                                <li class="bg-success service-masuk"><a
                                                                        href="{{ route('konsultasi.status', $data->id) }}?status=Service%20Masuk">
                                                                    Service Masuk</a>
                                                                </li>
                                                            @endif

                                                            @if ($canPesan)
                                                                <li role="separator" class="divider"></li>
                                                                <li class="pesan-action" >
                                                                    <a href="{{ route('pesan_action_global.index') }}?model_name=App\Models\Konsultasi">Pesan Action</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">
                                                            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="20" height="20" viewBox="0,0,256,256"
                                                            style="fill:#FFFFFF;">
                                                            <g fill="#ffffff" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(8.53333,8.53333)"><path d="M15,3c-6.627,0 -12,5.373 -12,12c0,2.25121 0.63234,4.35007 1.71094,6.15039l-1.60352,5.84961l5.97461,-1.56836c1.74732,0.99342 3.76446,1.56836 5.91797,1.56836c6.627,0 12,-5.373 12,-12c0,-6.627 -5.373,-12 -12,-12zM10.89258,9.40234c0.195,0 0.39536,-0.00119 0.56836,0.00781c0.214,0.005 0.44692,0.02067 0.66992,0.51367c0.265,0.586 0.84202,2.05608 0.91602,2.20508c0.074,0.149 0.12644,0.32453 0.02344,0.51953c-0.098,0.2 -0.14897,0.32105 -0.29297,0.49805c-0.149,0.172 -0.31227,0.38563 -0.44727,0.51563c-0.149,0.149 -0.30286,0.31238 -0.13086,0.60938c0.172,0.297 0.76934,1.27064 1.65234,2.05664c1.135,1.014 2.09263,1.32561 2.39063,1.47461c0.298,0.149 0.47058,0.12578 0.64258,-0.07422c0.177,-0.195 0.74336,-0.86411 0.94336,-1.16211c0.195,-0.298 0.39406,-0.24644 0.66406,-0.14844c0.274,0.098 1.7352,0.8178 2.0332,0.9668c0.298,0.149 0.49336,0.22275 0.56836,0.34375c0.077,0.125 0.07708,0.72006 -0.16992,1.41406c-0.247,0.693 -1.45991,1.36316 -2.00391,1.41016c-0.549,0.051 -1.06136,0.24677 -3.56836,-0.74023c-3.024,-1.191 -4.93108,-4.28828 -5.08008,-4.48828c-0.149,-0.195 -1.21094,-1.61031 -1.21094,-3.07031c0,-1.465 0.76811,-2.18247 1.03711,-2.48047c0.274,-0.298 0.59492,-0.37109 0.79492,-0.37109z"></path></g></g>
                                                            </svg>
                                                        </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