@php
use App\Models\FuBlokir;
@endphp
<div>
    <!-- Page -->
    <div class="page">
        <div class="page-header">
            <h1 class="page-title">Data Customer Blokir</h1>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="">Home</a></li>
                <li class="breadcrumb-item"><a href="javascript:void(0)">Marketing</a></li>
                <li class="breadcrumb-item active">Data Customer Blokir</li>
            </ol>

            <div class="page-header-actions">

                <button type="button" data-target="#tambah" data-toggle="modal"
                    class="btn btn-sm btn-icon btn-primary btn-round" data-toggle="tooltip"
                    data-original-title="Tambah">
                    <i class="icon md-hospital" aria-hidden="true"></i>
                </button>

                <button type="button" class="btn btn-sm btn-icon btn-primary btn-round" data-toggle="tooltip"
                    data-original-title="Refresh">
                    <i class="icon md-refresh-alt" aria-hidden="true"></i>
                </button>
            </div>

        </div>

        <div class="page-content container-fluid" style="margin-top: -30px">
            <div class="row">
                <div class="col-xl-12">
                    <!-- Panel Kitchen Sink -->
                    <div class="panel">
                        <header class="panel-heading">
                            <h3 class="panel-title">
                                Data Customer Blokir
                                @if (session()->has('pesan'))
                                <span class="panel-desc" style="color: green;">{{ session('pesan') }}</span>
                                @endif
                                <span class="panel-desc">
                                    {{ env('CORP_BRAND') }}
                                </span>
                            </h3>
                        </header>

                        <div class="panel-body">
                            <div class="row">
                                <div class="form-group form-material col-md-1 col-lg-1">
                                    <label class="form-control-label">Data</label>
                                    <select class="form-control" wire:model.live="cek_limit" required>
                                        <option>10</option>
                                        <option>50</option>
                                        <option>100</option>
                                        <option>250</option>
                                        <option>500</option>
                                    </select>
                                </div>

                                <div class="form-group form-material col-md-1 col-lg-1">
                                    <label class="form-control-label">Order</label>
                                    <select class="form-control" wire:model.live="cek_urutan" required>
                                        <option value="DESC">Z-A</option>
                                        <option value="ASC">A-Z</option>
                                    </select>
                                </div>

                                <div class="form-group form-material col-md-2 col-lg-2">
                                    <label class="form-control-label">By</label>
                                    <select class="form-control" wire:model.live="cek_order_by" required>
                                        <option value="freelance_fee.created_at">Tgl. Posting</option>
                                    </select>
                                </div>

                                <div class="col-md-8 col-lg-8">
                                    <div class="form-group form-material">

                                        <label class="form-control-label">Kata Kunci</label>
                                        <form wire:submit="search" enctype="multipart/form-data">
                                            <div class="input-group">
                                                <input type="text" wire:model.defer="cek_keyword"
                                                    placeholder="Ketik kata kunci pencarian ..." class="form-control"
                                                    required>
                                                <span class="input-group-append">
                                                    <button wire:click.prevent="search" type="submit"
                                                        class="btn btn-primary"><i class="icon md-search"
                                                            aria-hidden="true"></i></button>
                                                </span>
                                                <span class="input-group-append">
                                                    <button wire:click.prevent="clear_search" type="submit"
                                                        class="btn btn-primary"><i class="icon md-refresh"
                                                            aria-hidden="true"></i></button>
                                                </span>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            <hr>

                            <hr>

                            <table class="table table-hover table-bordered table-striped w-full">
                                <thead>
                                    <tr>
                                        <th rowspan="2" valign="middle">No</th>
                                        <th colspan="3">Customer</th>
                                        <th colspan="3">Service</th>
                                        <th colspan="3">Tanggal</th>

                                        <th colspan="3">History</th>


                                    </tr>
                                    <tr>
                                        <th>Nama</th>
                                        <th>Whatsapp</th>
                                        <th>Alamat</th>
                                        <th>Paket</th>
                                        <th>Harga (Rp.)</th>
                                        <th>Status</th>
                                        <th>Install</th>
                                        <th>Blokir</th>
                                        <th>Uninstall</th>
                                        <th>Follow Up</th>
                                        <th>Invoice</th>
                                        <th>Blokir</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($customer as $row)
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        <td>
                                            @if ($row->jenis_customer == 'Mr.' || $row->jenis_customer == 'Mrs.')
                                            <span class="badge badge-info">{{ $row->jenis_customer }}</span>
                                            @else
                                            <span class="badge badge-success">{{ $row->jenis_customer }}</span>
                                            @endif {{ $row->nama }}
                                        </td>
                                        <td>
                                            {{ $row->handphone }}
                                        </td>
                                        <td>
                                            <button wire:click.prevent="show({{ $row->id_instalasi }})" type="button"
                                                data-target="#detail_gps" data-toggle="modal"
                                                class="btn btn-sm btn-icon btn-primary btn-round" data-toggle="tooltip"
                                                data-original-title="Detail Customer">
                                                <i class="icon md-eye" aria-hidden="true"></i>
                                            </button>
                                        </td>
                                        <td>{{ $row->nama_produk }}</td>
                                        <td>{{ number($row->harga_produk) }}/Month</td>
                                        <td>
                                            @if ($row->status_instalasi == 'Pending')
                                            <span class="badge badge-danger">{{ $row->status_instalasi }}</span>
                                            @elseif ($row->status_instalasi == 'Survey')
                                            <span class="badge badge-warning">{{ $row->status_instalasi }}</span>
                                            @elseif ($row->status_instalasi == 'Installation')
                                            <span class="badge badge-info">{{ $row->status_instalasi }}</span>
                                            @elseif ($row->status_instalasi == 'Done')
                                            <span class="badge badge-success">Active</span>
                                            @elseif ($row->status_instalasi == 'Failed')
                                            <span class="badge badge-danger">{{ $row->status_instalasi }}</span>
                                            @else
                                            <span class="badge badge-danger">{{ $row->status_instalasi }}</span>
                                            @endif
                                        </td>
                                        <td>
                                            @if (!empty($row->tgl_pasang))
                                            {{ acc_date($row->tgl_pasang) }}
                                            @endif
                                        </td>
                                        <td>
                                            @if (!empty($row->tgl_blokir))
                                            {{ acc_date($row->tgl_blokir) }}
                                            @endif
                                        <td>
                                            @if (!empty($row->tgl_uninstal))
                                            {{ acc_date($row->tgl_uninstal) }}
                                            @endif
                                        </td>
                                        @php
                                        $follow_up_row = FuBlokir::where('id_instalasi', $row->id_instalasi)->first();

                                        $follow_up_count = 0;

                                        if ($follow_up_row) {
                                        $follow_up_count += $follow_up_row->hasil_fu1 ? 1 : 0;
                                        $follow_up_count += $follow_up_row->hasil_fu2 ? 1 : 0;
                                        $follow_up_count += $follow_up_row->hasil_fu3 ? 1 : 0;
                                        }
                                        @endphp

                                        <td>
                                            <button wire:click.prevent="show_history_fu({{ $row->id_instalasi }})"
                                                type="button" data-target="#history_fu" data-toggle="modal"
                                                class="btn btn-sm btn-icon btn-primary btn-round" data-toggle="tooltip"
                                                data-original-title="History Invoice">
                                                <i class="icon md-whatsapp" aria-hidden="true"></i>
                                                {{ $follow_up_count }}
                                            </button>
                                        </td>

                                        <td>
                                            <button wire:click.prevent="show_history_invoice({{ $row->id_instalasi }})"
                                                type="button" data-target="#history_invoice" data-toggle="modal"
                                                class="btn btn-sm btn-icon btn-primary btn-round" data-toggle="tooltip"
                                                data-original-title="History Invoice">
                                                <i class="icon md-eye" aria-hidden="true"></i>
                                                {{ $row->total_invoice }}
                                            </button>
                                        </td>

                                        <td>
                                            <button wire:click.prevent="show_history_block({{ $row->id_instalasi }})"
                                                type="button" data-target="#history_block" data-toggle="modal"
                                                class="btn btn-sm btn-icon btn-primary btn-round" data-toggle="tooltip"
                                                data-original-title="History Blokir">
                                                <i class="icon md-eye" aria-hidden="true"></i>
                                            </button>
                                        </td>

                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                            <hr>
                            {{ $customer->links() }}

                        </div>
                    </div>
                    <!-- End Panel Kitchen Sink -->


                </div>



            </div>
        </div>
    </div>
    <!-- End Page -->

        <!-- Modal History Blokir-->
    <div wire:ignore.self class="modal fade" id="history_block" tabindex="-1" data-keyboard="false"
        data-backdrop="static" aria-labelledby="TambahData" aria-hidden="true">
        <form wire:submit="store" enctype="multipart/form-data">
            <div class="modal-dialog modal-simple modal-content modal-lg">
                <div class="modal-header">
                    <button type="button" class="close" wire:click="ClearForm" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title" id="exampleFormModalLabel">History Blokir
                        <span wire:loading wire:target="show_riwayat_invoice" class="panel-desc"
                            style="color: red;"><b>Loading.....</b></span>
                    </h4>

                </div>
                <div class="modal-body">
                    <div class="row">

                        <table class="table table-hover table-bordered table-striped w-full">
                            <thead>
                                <tr>
                                    <th>No</th>
                                    <th>Tgl. Invoice</th>
                                    <th>Tgl. Pembayaran</th>
                                    <th>No. Invoice</th>
                                    <th>Pelanggan</th>
                                    <th>Produk</th>
                                    <th>Tagihan + Tax (Rp)</th>
                                    <th>Status</th>
                                    <th>Tgl. Blokir</th>

                                </tr>
                            </thead>
                            <tbody>
                                @if (!empty($history_block))

                                @foreach ($history_block as $row)
                                <tr wire:key="{{ $row->id_invoice }}">
                                    <td>{{ $loop->index + 1 }}</td>
                                    <td>{{ tgl_indo($row->tgl_invoice) }}</td>
                                    <td>{{ tgl_indo($row->tgl_pembayaran) }} {{ $row->jam_pembayaran }}</td>
                                    <td>{{ $row->no_invoice }}</td>
                                    <td>
                                        @if ($row->jenis_customer == 'Mr.' || $row->jenis_customer == 'Mrs.')
                                        <span class="badge badge-info">{{ $row->jenis_customer }}</span>
                                        @else
                                        <span class="badge badge-success">{{ $row->jenis_customer }}</span>
                                        @endif

                                        {{ $row->nama }}
                                    </td>
                                    <td>{{ $row->item_details_name }}</td>
                                    <td>{{ number($row->gross_amount) }}</td>
                                    <td>

                                        @if ($row->status_invoice == 'settlement')
                                        <span class="badge badge-success">Lunas</span>
                                        @elseif ($row->status_invoice == 'Belum Dibayar')
                                        <span class="badge badge-danger">Belum Dibayar</span>
                                        @else
                                        <span class="badge badge-warning">{{ $row->status_invoice }}</span>
                                        @endif
                                    </td>
                                    <td>{{ tgl_indo($row->tgl_blokir) }} {{ $row->jam_blokir }}</td>

                                </tr>
                                @endforeach
                                @endif


                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <!-- Modal History Blokir-->


    <!-- Modal History Invoice-->
    <div wire:ignore.self class="modal fade" id="history_invoice" tabindex="-1" data-keyboard="false"
        data-backdrop="static" aria-labelledby="TambahData" aria-hidden="true">
        <form wire:submit="store" enctype="multipart/form-data">
            <div class="modal-dialog modal-simple modal-content modal-lg">
                <div class="modal-header">
                    <button type="button" class="close" wire:click="ClearForm" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title" id="exampleFormModalLabel">History Invoice
                        <span wire:loading wire:target="show_history_invoice" class="panel-desc"
                            style="color: red;"><b>Loading.....</b></span>
                    </h4>

                </div>
                <div class="modal-body">
                    <div class="row">

                        <table class="table table-hover table-bordered table-striped w-full">
                            <thead>
                                <tr>
                                    <th>No</th>
                                    <th>Tgl. Invoice</th>
                                    <th>Tgl. Pembayaran</th>
                                    <th>No. Invoice</th>
                                    <th>Pelanggan</th>
                                    <th>Produk</th>
                                    <th>Tagihan + Tax (Rp)</th>
                                    <th>Dibayar (Rp)</th>
                                    <th>Piutang (Rp)</th>
                                    <th>Status</th>

                                </tr>
                            </thead>
                            <tbody>
                                
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <!-- Modal History Tiket Invoice-->

        <!-- Modal History Detail Alamat-->
    <div wire:ignore.self class="modal fade" id="detail_gps" tabindex="-1" data-keyboard="false" data-backdrop="static"
        aria-labelledby="TambahData" aria-hidden="true">
            <div class="modal-dialog modal-simple modal-content modal-lg">
                <div class="modal-header">
                    <button type="button" class="close" wire:click="ClearForm" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title" id="exampleFormModalLabel">History Detail Alamat
                        <span wire:loading wire:target="show_history_invoice" class="panel-desc"
                            style="color: red;"><b>Loading.....</b></span>
                        @if (session()->has('pesan'))
                        <span class="panel-desc" style="color: green;">{{ session('pesan') }}</span>
                        @endif
                    </h4>

                </div>
                <div class="modal-body">


                    <div class="row" wire:loading.remove>


                        <div class="form-group form-material col-md-12">
                            <label class="form-control-label">Alamat</label>
                            <input type="text" class="form-control" value="{{ $alamat }}" readonly>
                        </div>

                        <div class="form-group form-material col-md-6">
                            <label class="form-control-label">Phone</label>
                            <input type="text" class="form-control" value="{{ $telepon }}" readonly>
                        </div>

                        <div class="form-group form-material col-md-6">
                            <label class="form-control-label">Handphone</label>
                            <input type="text" class="form-control" value="{{ $handphone }}" readonly>
                        </div>
                        <div class="form-group form-material col-md-12">
                            <label class="form-control-label">Lokasi </label>
                            <br>
                            <iframe width="100%" height="450" style="border:0" loading="lazy" allowfullscreen
                                referrerpolicy="no-referrer-when-downgrade"
                                src="https://www.google.com/maps/embed/v1/place?key=AIzaSyCN9D3kjoY6amHei1ZDeNIdNSLlY6kbitQ&q={{ $titik_gps }}">
                            </iframe>
                        </div>

                    </div>
                </div>
            </div>
    </div>
    <!-- Modal History Detail Alamat-->

    <!-- Modal History Follow Up-->
    <div wire:ignore.self class="modal fade" id="history_fu" tabindex="-1" data-keyboard="false" data-backdrop="static"
        aria-labelledby="TambahData" aria-hidden="true">
        <form wire:submit="store" enctype="multipart/form-data">
            <div class="modal-dialog modal-simple modal-content modal-lg">
                <div class="modal-header">
                    <button type="button" class="close" wire:click="ClearForm" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title" id="exampleFormModalLabel">History Follow Up
                        <span wire:loading wire:target="show_history_invoice" class="panel-desc"
                            style="color: red;"><b>Loading.....</b></span>
                        @if (session()->has('pesan'))
                        <span class="panel-desc" style="color: green;">{{ session('pesan') }}</span>
                        @endif
                    </h4>

                </div>
                <div class="modal-body">
                    <div class="row">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>Follow Up </th>
                                    <th>Tanggal Follow Up</th>
                                    <th>Hasil Follow Up</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if ($history_fu)
                                <tr>
                                    <td>Follow Up Ke 1</td>
                                    <td>{{ tgl_indo($history_fu->tgl_fu1) ?? '-' }}</td>
                                    <td>{{ $history_fu->hasil_fu1 ?? '-' }}</td>
                                    <td>
                                        <button
                                            wire:click.prevent="fu_customer({{ $history_fu->id_mm_fu_blokir ?? 0 }})"
                                            type="button" class="btn btn-sm btn-icon btn-primary btn-round"
                                            data-toggle="tooltip" data-original-title="Edit" {{
                                            !empty($history_fu->hasil_fu1) ? 'disabled' : '' }}>
                                            <i class="icon md-whatsapp" aria-hidden="true"></i>
                                        </button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Follow Up Ke 2</td>
                                    <td>{{ tgl_indo($history_fu->tgl_fu2) ?? '-' }}</td>
                                    <td>{{ $history_fu->hasil_fu2 ?? '-' }}</td>
                                    <td>
                                        <button
                                            wire:click.prevent="fu_customer({{ $history_fu->id_mm_fu_blokir ?? 0 }})"
                                            type="button" class="btn btn-sm btn-icon btn-primary btn-round"
                                            data-toggle="tooltip" data-original-title="Edit" {{
                                            !empty($history_fu->hasil_fu2) ? 'disabled' : '' }}>
                                            <i class="icon md-whatsapp" aria-hidden="true"></i>
                                        </button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Follow Up Ke 3</td>
                                    <td>{{ tgl_indo($history_fu->tgl_fu3) ?? '-' }}</td>
                                    <td>{{ $history_fu->hasil_fu3 ?? '-' }}</td>
                                    <td>
                                        <button
                                            wire:click.prevent="fu_customer({{ $history_fu->id_mm_fu_blokir ?? 0 }})"
                                            type="button" class="btn btn-sm btn-icon btn-primary btn-round"
                                            data-toggle="tooltip" data-original-title="Edit" {{
                                            !empty($history_fu->hasil_fu3) ? 'disabled' : '' }}>
                                            <i class="icon md-whatsapp" aria-hidden="true"></i>
                                        </button>
                                    </td>
                                </tr>
                                @else
                                <tr>
                                    <td colspan="4" class="text-center text-danger">
                                        Data Follow Up belum diinput.<br>
                                        Silakan input terlebih dahulu di menu <b>Follow Up Customer</b>.
                                    </td>
                                </tr>
                                @endif
                            </tbody>

                        </table>

                    </div>
                </div>
            </div>
        </form>
    </div>
    <!-- Modal History Follow Up-->

</div>