@php
use App\Models\WaGeneralNotifDetail;
@endphp
<div>
    <!-- Page -->
    <div class="page">
        <div class="page-header">
            <h1 class="page-title">Data Maintenance Info</h1>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="javascript:void(0)">Tools</a></li>
                <li class="breadcrumb-item active">Data Maintenance Info</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">
            <div class="row">
                <div class="col-xl-12">
                    <!-- Panel Kitchen Sink -->
                    <div class="panel">
                        <header class="panel-heading">
                            <h3 class="panel-title">
                                Data Maintenance Info
                                @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-2 col-lg-2">
                                    <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-2 col-lg-2">
                                    <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>
                                    </select>
                                </div>

                                <div class="form-group form-material col-md-10 col-lg-6">
                                    <label class="form-control-label">Kata Kunci</label>
                                    <input type="text" wire:model.live="cek_keyword"
                                        placeholder="Ketik Kata Kunci Pencarian..." class="form-control" required>
                                </div>
                            </div>

                            <hr>

                            <table class="table table-hover table-striped w-full">
                                <thead>
                                    <tr>
                                        <th>No</th>
                                        <th>Nama Notif</th>
                                        <th>Tindakan pemeliharaan</th>
                                        <th>Lokasi</th>
                                        <th>Dampak</th>
                                        <th style="text-align: center">Waktu Mulai</th>
                                        <th>Estimasi Penyelesaian</th>
                                        <th>Catatan Tambahan</th>
                                        <th>Customer</th>
                                        <th>WhatsApp</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($data as $row)
                                    @php
                                    // count customer yang sudah masuk kedalam General Notif
                                    $count_customer = WaGeneralNotifDetail::where('id_wa_general_notif',
                                    $row->id_wa_general_notif)
                                    ->count('id_wa_general_notif_detail');
                                    $date = new DateTime($row->start_time);
                                    $date_akhir = new DateTime($row->end_time);
                                    $date_array = [
                                    'tanggal' => $date->format('d F Y'), // Tanggal dalam format '01 Januari 2025'
                                    'waktu' => $date->format('H:i:s') ,// Waktu dalam format '15:29:00'
                                    'tanggal_akhir' => $date_akhir->format('d F Y'),
                                    'waktu_akhir' => $date_akhir->format('H:i:s')
                                    ];

                                    @endphp
                                    <tr>
                                        <td>{{ $loop->index + 1 }}</td>
                                        <td>{{ $row->nama_notif }}</td>
                                        <td>{{ $row->action }}</td>
                                        <td>{{ $row->location }}</td>
                                        <td>{{ $row->impact }}</td>
                                        <td style="text-align: center">{{ tgl_indo($date_array['tanggal']) }} {{
                                            $date_array['waktu']}}
                                            <b>s/d </b> {{ tgl_indo($date_array['tanggal_akhir']) }}
                                            {{$date_array['waktu_akhir'] }}
                                        </td>
                                        <td>{{ $row->estimated_duration }} menit</td>
                                        <td>{{ $row->notes }}</td>
                                        <td>
                                            <a href="/tools/wa-general-notif/{{$row->id_wa_general_notif}}"
                                                target="_blank">
                                                <button type="button" data-toggle="modal"
                                                    class="btn btn-sm btn-icon btn-primary btn-round"
                                                    data-toggle="tooltip" data-original-title="Edit">{{ $count_customer
                                                    }} Customer
                                                    <i class="icon md-eye" aria-hidden="true"></i>
                                                </button>
                                            </a>
                                        </td>
                                        <td>
                                            <button wire:click.prevent="show({{ $row->id_wa_general_notif  }})"
                                                type="button" data-target="#whatsapp" data-toggle="modal"
                                                class="btn btn-sm btn-icon btn-primary btn-round" data-toggle="tooltip"
                                                data-original-title="Edit">
                                                <i class="icon md-whatsapp" aria-hidden="true"></i>
                                                broadcast
                                            </button>
                                        </td>
                                        <td>
                                            <button wire:click.prevent="show({{ $row->id_wa_general_notif  }})"
                                                type="button" data-target="#edit" data-toggle="modal"
                                                class="btn btn-sm btn-icon btn-primary btn-round" data-toggle="tooltip"
                                                data-original-title="Edit">
                                                <i class="icon md-edit" aria-hidden="true"></i>
                                            </button>

                                            <button wire:click.prevent="show({{ $row->id_wa_general_notif  }})"
                                                data-target="#delete" data-toggle="modal" type="button"
                                                class="btn btn-sm btn-icon btn-danger btn-round" data-toggle="tooltip"
                                                data-original-title="Delete">
                                                <i class="icon md-delete" aria-hidden="true"></i>
                                            </button>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>

                            </table>
                            <hr>
                            {{ $data->links() }}
                            <span wire:loading.delay.shortest class="panel-desc" style="color: red;"><i
                                    class="icon md-spinner" aria-hidden="true"></i> <b>Loading.....</b></span>
                        </div>
                    </div>
                    <!-- End Panel Kitchen Sink -->
                </div>
            </div>
        </div>
    </div>
    <!-- End Page -->

    <!-- Modal Tambah -->
    <div wire:ignore.self class="modal fade" id="tambah" tabindex="-1" data-keyboard="false" data-backdrop="static"
        aria-labelledby="TambahData" aria-hidden="true">
        <form wire:submit.prevent="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">x</span>
                    </button>
                    <h4 class="modal-title" id="exampleFormModalLabel">Form Maintenance Info
                        @if (session()->has('pesan'))
                        <span class="panel-desc" style="color: green;">{{ session('pesan') }}</span>
                        @endif
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="form-group form-material col-md-12">
                            <label class="form-control-label">Nama Notifikasi</label>
                            <input type="text" wire:model.defer="nama_notif" class="form-control">
                        </div>

                        <div class="form-group form-material col-md-12">
                            <label class="form-control-label">Tindakan Pemeliharaan</label>
                            <input type="text" wire:model.defer="action" class="form-control">
                        </div>

                        <div class="form-group form-material col-md-6">
                            <label class="form-control-label">Lokasi</label>
                            <input type="text" wire:model.defer="location" class="form-control">
                        </div>

                        <div class="form-group form-material col-md-6">
                            <label class="form-control-label">Dampak</label>
                            <input type="text" wire:model.defer="impact" class="form-control">
                        </div>

                        <div class="form-group form-material col-md-6">
                            <label class="form-control-label">Waktu Mulai</label>
                            <input type="datetime-local" wire:model.defer="start_time" class="form-control">
                        </div>

                        <div class="form-group form-material col-md-6">
                            <label class="form-control-label">Waktu Selesai</label>
                            <input type="datetime-local" wire:model.defer="end_time" class="form-control">
                        </div>

                        <div class="form-group form-material col-md-6">
                            <label class="form-control-label">Estimasi Penyelesaian (Menit)</label>
                            <input type="number" wire:model.defer="estimated_duration" class="form-control">
                        </div>

                        <div class="form-group form-material col-md-6">
                            <label class="form-control-label">Catatan Tambahan</label>
                            <input type="text" wire:model.defer="notes" class="form-control">
                        </div>

                        <div class="col-md-6 float-right">
                            <button type="submit" class="btn btn-primary btn-block">Save</button>
                        </div>
                        <div class="col-md-6 float-left">
                            <button type="button" wire:click="ClearForm" data-dismiss="modal" aria-label="Close"
                                class="btn btn-primary btn-block">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <!-- End Modal Tambah -->

    <!-- Modal Edit -->
    <div wire:ignore.self class="modal fade" id="edit" tabindex="-1" data-keyboard="false" data-backdrop="static"
        aria-labelledby="EditData" aria-hidden="true">
        <form wire:submit.prevent="update({{$id_wa_general_notif}})">
            <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">x</span>
                    </button>
                    <h4 class="modal-title" id="exampleFormModalLabel">Update Maintenance Info
                        @if (session()->has('pesan'))
                        <span class="panel-desc" style="color: green;">{{ session('pesan') }}</span>
                        @endif
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="form-group form-material col-md-12">
                            <label class="form-control-label">Nama Notifikasi</label>
                            <input type="text" class="form-control" wire:model.defer="nama_notif" required>
                        </div>
                        <div class="form-group form-material col-md-12">
                            <label class="form-control-label">Tindakan Pemeliharaan</label>
                            <input type="text" class="form-control" wire:model.defer="action" required>
                        </div>
                        <div class="form-group form-material col-md-6">
                            <label class="form-control-label">Lokasi</label>
                            <input type="text" class="form-control" wire:model.defer="location" required>
                        </div>
                        <div class="form-group form-material col-md-6">
                            <label class="form-control-label">Dampak</label>
                            <input type="text" class="form-control" wire:model.defer="impact" required>
                        </div>
                        <div class="form-group form-material col-md-6">
                            <label class="form-control-label">Waktu Mulai</label>
                            <input type="datetime-local" class="form-control" wire:model.defer="start_time" required>
                        </div>
                        <div class="form-group form-material col-md-6">
                            <label class="form-control-label">Waktu Selesai</label>
                            <input type="datetime-local" class="form-control" wire:model.defer="end_time" required>
                        </div>
                        <div class="form-group form-material col-md-6">
                            <label class="form-control-label">Estimasi Penyelesaian (Menit)</label>
                            <input type="number" class="form-control" wire:model.defer="estimated_duration" required>
                        </div>
                        <div class="form-group form-material col-md-6">
                            <label class="form-control-label">Catatan Tambahan</label>
                            <textarea class="form-control" wire:model.defer="notes"></textarea>
                        </div>

                        <div class="col-md-6 float-right">
                            <button type="submit" class="btn btn-primary btn-block">Update</button>
                        </div>
                        <div class="col-md-6 float-left">
                            <button type="button" wire:click="ClearForm" data-dismiss="modal" aria-label="Close"
                                class="btn btn-primary btn-block">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <!-- End Modal Edit -->

    <!-- Modal Delete -->
    <div wire:ignore.self class="modal fade" id="delete" tabindex="-1" data-keyboard="false" data-backdrop="static"
        aria-labelledby="DeleteData" aria-hidden="true">
        <form wire:submit.prevent="destroy({{ $id_wa_general_notif }})">
            <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">Konfirmasi Penghapusan</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-12">
                            <p>Apakah Anda yakin ingin menghapus data?</p>

                        </div>
                        <div class="col-md-6 float-right">
                            <button type="submit" class="btn btn-danger btn-block">Hapus Data</button>
                        </div>
                        <div class="col-md-6 float-left">
                            <button type="button" wire:click="ClearForm" data-dismiss="modal" aria-label="Close"
                                class="btn btn-secondary btn-block">Tutup</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <!-- End Modal Delete -->

    {{-- Modal Broadcast Maintenance --}}
    <div wire:ignore.self class="modal fade" id="whatsapp" tabindex="-1" data-keyboard="false" data-backdrop="static"
        aria-labelledby="EditData" aria-hidden="true">
        <form wire:submit.prevent="broadcast({{$id_wa_general_notif}})">
            <div class="modal-dialog modal-lg">
                <div class="modal-content"
                    style="background-color: #fff; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
                    <div class="modal-header">
                        <button type="button" class="close" wire:click="ClearForm" data-dismiss="modal"
                            aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title" id="exampleFormModalLabel">
                            Broadcast Maintenance Info
                            @if (session()->has('pesan'))
                            <span class="panel-desc" style="color: green; font-weight: bold;">{{ session('pesan')
                                }}</span>
                            @endif
                        </h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-12">
                                @php
                                    $date_mulai = new DateTime($this->start_time);
                                    $date_akhir = new DateTime($this->end_time);
                                    
                                    $date_array = [
                                    'tanggal_mulai' => $date_mulai->format('d F Y'), // Tanggal dalam format '01 Januari 2025'
                                    'waktu_mulai' => $date_mulai->format('H:i:s'), // Waktu dalam format '15:29:00'
                                    'tanggal' => $date_akhir->format('d F Y'), // Tanggal dalam format '01 Januari 2025'
                                    'waktu' => $date_akhir->format('H:i:s') ,// Waktu dalam format '15:29:00'
                            ];
                                @endphp
                                <p style="font-size: 16px; line-height: 1.6;">
                                    <strong>Pesan Broadcast:</strong>
                                    
                                    <br><br>
                                    <b><span><i>INFO URGENT MAINTENANCE</i></span></b> Kepada Pelanggan Setia {{env('CORP_NAME')}}
                                    ({{env('CORP_BRAND')}}). Kami ingin menginformasikan bahwa akan dilaksanakan
                                    <strong>{{ $this->action }}</strong> pada Data Center kami.
                                    <br><br>

                                <ul style="line-height: 1.8; list-style-type: none;">
                                    <li><strong>Detail Action:</strong> {{$this->action}}</li>
                                    <li><strong>Lokasi:</strong> {{ $this->location }}</li>
                                    <li><strong>Dampak:</strong> {{ $this->impact }}</li>
                                    <li><strong>Waktu Mulai:</strong> {{ $date_array['tanggal_mulai'] }} {{ $date_array['waktu_mulai'] }}</li>
                                    <li><strong>Waktu Selesai:</strong> {{ $date_array['tanggal'] }} {{$date_array['waktu'] }}</li>
                                    <li><strong>Estimasi Penyelesaian:</strong> {{ $this->estimated_duration }} Menit
                                    </li>
                                    <li><strong>Catatan Tambahan:</strong> {{ $this->notes }}</li>
                                </ul>

                                <br>
                                Mohon maaf atas ketidaknyamanan yang terjadi dan kami akan memberikan info lebih lanjut
                                segera. Terimakasih 🙏🏻 <br>
                                Abaikan pesan ini jika internet di rumah Anda berjalan dengan baik.
                                <br><br>
                                <strong><em>NOC MMS</em></strong>
                                </p>
                            </div>
<br><br>
                            <div class="col-md-6">
                                <button type="submit" class="btn btn-primary btn-block">Broadcast</button>
                            </div>

                            <div class="col-md-6">
                                <button type="button" wire:click="ClearForm" data-dismiss="modal" aria-label="Close"
                                    class="btn btn-secondary btn-block">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    {{-- End Modal Broadcast Maintenance --}}


</div>