@extends('layouts.headatmin')
@section('title', 'Manajemen Pelanggan')
@section('content')


@if(session('success'))
<div class="custom-alert" id="popup-alert">
    <div class="d-flex align-items-center w-100">
        <span class="ikoon-badge ikoon-sukses mr-0">
            <i class="bi bi-check-circle-fill"></i>
        </span>

        <div class="message flex-grow-1">{{ session('success') }}</div>
        <button type="button" class="btn-close-custom" onclick="closeAlert()" aria-label="Close">&times;</button>
    </div>
</div>

<style>
    .custom-alert {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 9999;
        background-color: #fff;
        border-radius: 6px;
        padding: 16px 20px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        border-bottom: 4px solid #28a745;
        min-width: 300px;
        animation: slideDown 0.3s ease-in-out;
    }

    .custom-alert .icon {
        color: #28a745;
        font-size: 18px;
    }

    .custom-alert .message {
        font-size: 14px;
        color: #333;
    }

    .btn-close-custom {
        background: none;
        border: none;
        font-size: 20px;
        line-height: 1;
        color: #999;
        cursor: pointer;
        padding: 0;
        margin-left: 10px;
    }

    .btn-close-custom:hover {
        color: #333;
    }

    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
</style>

<script>
    function closeAlert() {
        const alert = document.getElementById('popup-alert');
        if (alert) alert.remove();
    }

    // Auto close after 5 seconds
    setTimeout(() => {
        closeAlert();
    }, 5000);
</script>
@endif

<div class="container-fluid ">
    <div class="card shadow mb-4">
        <div class="card-header d-flex justify-content-between py-3">
            <h5 class="m-0 font-weight-bold ">Daftar Pelanggan</h5>
            <div class="d-flex">
                <a href="{{ route('pelanggan.create') }}" class="btn btn-success mr-2">
                    <span class="icon text-white-50"></span>
                    <span class="text">Tambah Pelanggan</span>
                </a>
            </div>
        </div>
        <div class="card-body">


            <!-- Filter Form -->
            <form method="GET" action="{{ route('pelanggan.index') }}" class="mb-4">
                <div class="row g-3">
                    <div class="col-md-3  d-flex justify-content-between">
                        <select name="status" class="form-control">
                            <option value="">Semua</option>
                            <option value="aktif" {{ request('status') == 'aktif' ? 'selected' : '' }}>Aktif</option>
                            <option value="tidak aktif" {{ request('status') == 'tidak aktif' ? 'selected' : '' }}>tidak aktif</option>
                        </select>
                    </div>
                    <div class="col-md-9">
                        <form class="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">
                            <div class="input-group ">
                                <input type="text" class="form-control bg-light small" name="search" placeholder="Cari Pelanggan..." value="{{ request('search') }}"
                                    aria-label="Search" aria-describedby="basic-addon2">
                                </input>
                                <div class="input-group-append">
                                    <button class="btn btn-primary " type="submit" value="{{ request('search') }}">
                                        <i class="fas fa-search fa-sm"></i>
                                    </button>
                                </div>
                            </div>
                        </form>
                        <!-- <label for="search" class="form-label">Pencarian</label> -->
                        <!-- <input type="text" class="form-control" name="search" placeholder="Cari karyawan..." value="{{ request('search') }}"> -->
                    </div>


                </div>


            </form>



            <!-- Karyawan Table -->
            <div class="table-responsive">
                <table class="table table-bordered text-center">
                    <thead>
                        <tr>
                            <th>Foto</th>
                            <th>Nama</th>
                            <th style="max-width: 150px;">Alamat</th>
                            <th>No HP</th>
                            <th>Jenis Langganan</th>
                            <th style="max-width: 150px;">Tanggal Aktivasi</th>
                            <th style="max-width: 150px;">Tanggal Jatuh Tempo</th> <!-- Tambahan -->
                            <th>Status</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                     @php
                        $pelangganSorted = $pelanggan->sortBy(function ($item) {
                            return $item->tanggal_jatuh_tempo 
                                ? \Carbon\Carbon::parse($item->tanggal_jatuh_tempo)->timestamp 
                                : PHP_INT_MAX; // letakkan yang null di akhir
                        });
                    @endphp

                    @foreach ($pelangganSorted as $p)
                    <tr>
                        <td>
                            @if($p->foto)
                            <img
                                src="{{ asset('storage/'.$p->foto) }}"
                                width="50"
                                height="50"
                                style="border-radius: 50%; object-fit: cover; box-shadow: 0 4px 6px rgba(0,0,0,0.1); border: 1px solid #ccc;">
                            @else
                            <img src="{{ asset('img/blank_profile.jpg') }}"
                                width="50"
                                height="50"
                                style="border-radius: 50%; object-fit: cover; box-shadow: 0 4px 6px rgba(0,0,0,0.1); border: 1px solid #ccc;">
                            @endif
                        </td>
                        <td>{{ $p->nama }}</td>
                        <td style="max-width: 150px;">{{ $p->alamat }}</td>
                        <td>{{ $p->no_hp }}</td>
                        <td>{{ $p->paketLangganan->nama ?? '-' }}</td>
                        <td>{{ $p->tanggal_aktivasi ?? '-' }}</td>
                        <td>
                            {{ $p->tanggal_jatuh_tempo ? $p->tanggal_jatuh_tempo->format('Y-m-d') : '-' }}
                            @if($p->tanggal_jatuh_tempo)
                                @php
                                    $today = \Carbon\Carbon::today();
                                    $dueDate = \Carbon\Carbon::parse($p->tanggal_jatuh_tempo);
                                    $diff = $today->diffInDays($dueDate, false); // false = bisa negatif
                                @endphp
                                <br>
                                @if($diff > 0)
                                    <span class="badge bg-warning text-white">Sisa {{ $diff }} hari</span>
                                @elseif($diff === 0)
                                    <span class="badge bg-danger text-white">Jatuh tempo hari ini!</span>
                                @else
                                    <span class="badge bg-secondary text-white">Terlambat -{{ abs($diff) }} hari</span>
                                @endif
                            @endif
                        </td>
                        <td>
                            <div>
                                @if($p->status == 'aktif')
                                <span class="status-badge status-aktif">
                                    <i class="bi bi-check-circle-fill"></i> Aktif
                                </span>
                                @else
                                <span class="status-badge status-tidakaktif">
                                    <i class="bi bi-x-circle-fill"></i> Tdk Aktif
                                </span>
                                @endif
                            </div>
                        </td>
                        <td>
                            <div class="d-flex align-items-center gap-10">
                                <a href="{{ route('pelanggan.show', $p->id_user) }}" class="btn btn-info btn-sm ">
                                    <img src="{{ asset('img/info.png')}}" style="padding: 2px;">
                                </a>
                                <a href="{{ route('pelanggan.edit', $p->id_user) }}" class="btn btn-warning btn-sm m-2">
                                    <img src="{{ asset('img/edit.png')}}" style="padding: 2px">
                                </a>
                                <form action="{{ route('pelanggan.destroy', $p->id_user) }}" method="POST" class="delete-form ">
                                    @csrf
                                    @method('DELETE')
                                    <button type="button" class="btn btn-danger btn-sm delete-button">
                                        <img src="{{ asset('img/delete.png') }}" style="padding:2px">
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @endforeach

                    </tbody>
                </table>
            </div>
            <div class="d-flex justify-content-center mt-3">
                <nav>
                    <ul class="pagination pagination-sm mb-0">
                        {{ $pelanggan->appends(request()->except('page'))->onEachSide(1)->links('pagination::bootstrap-4') }}
                    </ul>
                </nav>
            </div>

        </div>
    </div>
    <!-- Page level plugins -->
    <script src="{{ asset('vendor/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/dataTables.bootstrap4.min.js') }}"></script>

    <!-- Page level custom scripts -->
    <script src="{{ asset('js/demo/datatables-demo.js') }}"></script>


    <!-- Custom scripts for all pages-->
    <script src="{{ asset('js/sb-admin-2.min.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            document.querySelectorAll('.delete-button').forEach(button => {
                button.addEventListener('click', function() {
                    let form = this.closest("form"); // Ambil form terdekat
                    Swal.fire({
                        title: "Apakah Anda yakin?",
                        text: "Data yang dihapus tidak bisa dikembalikan!",
                        icon: "warning",
                        showCancelButton: true,
                        confirmButtonColor: "#d33",
                        cancelButtonColor: "#3085d6",
                        confirmButtonText: "Ya, Hapus!",
                        cancelButtonText: "Batal"
                    }).then((result) => {
                        if (result.isConfirmed) {
                            form.submit(); // Kirim form jika dikonfirmasi
                        }
                    });
                });
            });
        });
    </script>


    @endsection