@extends('layouts.app')

@section('head')
<meta name="csrf-token" content="{{ csrf_token() }}" />
<link id="canonicalTag" rel="canonical" href="" />
<link rel="stylesheet" href="{{ asset('plugins/gliderjs/glider.min.css')}}" />
@endsection

@section('content')
<div class="lg:container pt-16 pb-32 lg:pb-0 mx-4">
    {{-- Breadcrumb --}}
    <div class="flex mt-8 text-gray-700">
        <!--begin::Breadcrumb-->
        <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse">
            <li class="inline-flex items-center">
                <a href="{{ route('beranda') }}"
                    class="inline-flex items-center text-xs text-primary hover:text-primary-dark">Beranda</a>
            </li>
            <li aria-current="page">
                <div class="flex items-center">
                    <i class="fa fa-chevron-right text-xs text-gray-400"></i>
                    <span class="ms-1 text-xs text-black md:ms-2">List Paket</span>
                </div>
            </li>
        </ol>
    </div>
    {{-- End Breadcrumb --}}
    <div class="lg:flex my-6 gap-6">
        <div class="bg-white xl:w-3/12 md:w-4/12 hidden lg:block">
            <div class="p-4 flex flex-col items-center rounded-xl shadow-custom mb-4">
                <div class="flex items-center">
                    <div id="image-preview"
                        class="shrink-0 relative flex items-center object-center hover:bg-slate-100 flex-none w-14 h-14 rounded-full overflow-hidden border-2 border-gray-100 shadow-md cursor-pointer">
                        {{-- <input id="upload" type="file" class="hidden" accept="image/*" />
                        <label for="upload"
                            class="cursor-pointer absolute flex items-center justify-center bottom-0 z-20 left-0 right-0 top-0 h-full w-full overflow-hidden bg-black/50 bg-fixed opacity-0 transition duration-300 ease-in-out hover:opacity-100">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M7 6V6.75C7.25076 6.75 7.48494 6.62467 7.62404 6.41603L7 6ZM8.40627 3.8906L7.78223 3.47457V3.47457L8.40627 3.8906ZM15.5937 3.8906L16.2178 3.47457L15.5937 3.8906ZM17 6L16.376 6.41603C16.5151 6.62467 16.7492 6.75 17 6.75V6ZM14.25 13.5C14.25 14.7426 13.2426 15.75 12 15.75V17.25C14.0711 17.25 15.75 15.5711 15.75 13.5H14.25ZM12 15.75C10.7574 15.75 9.75 14.7426 9.75 13.5H8.25C8.25 15.5711 9.92893 17.25 12 17.25V15.75ZM9.75 13.5C9.75 12.2574 10.7574 11.25 12 11.25V9.75C9.92893 9.75 8.25 11.4289 8.25 13.5H9.75ZM12 11.25C13.2426 11.25 14.25 12.2574 14.25 13.5H15.75C15.75 11.4289 14.0711 9.75 12 9.75V11.25ZM7.62404 6.41603L9.0303 4.30662L7.78223 3.47457L6.37596 5.58397L7.62404 6.41603ZM10.0704 3.75H13.9296V2.25H10.0704V3.75ZM14.9697 4.30662L16.376 6.41603L17.624 5.58397L16.2178 3.47457L14.9697 4.30662ZM13.9296 3.75C14.3476 3.75 14.7379 3.95888 14.9697 4.30662L16.2178 3.47457C15.7077 2.70953 14.8491 2.25 13.9296 2.25V3.75ZM9.0303 4.30662C9.26214 3.95888 9.65243 3.75 10.0704 3.75V2.25C9.1509 2.25 8.29226 2.70953 7.78223 3.47457L9.0303 4.30662ZM21.25 10V17H22.75V10H21.25ZM18 20.25H6V21.75H18V20.25ZM2.75 17V10H1.25V17H2.75ZM6 20.25C4.20507 20.25 2.75 18.7949 2.75 17H1.25C1.25 19.6234 3.37665 21.75 6 21.75V20.25ZM21.25 17C21.25 18.7949 19.7949 20.25 18 20.25V21.75C20.6234 21.75 22.75 19.6234 22.75 17H21.25ZM18 6.75C19.7949 6.75 21.25 8.20507 21.25 10H22.75C22.75 7.37665 20.6234 5.25 18 5.25V6.75ZM6 5.25C3.37665 5.25 1.25 7.37665 1.25 10H2.75C2.75 8.20507 4.20507 6.75 6 6.75V5.25ZM6 6.75H7V5.25H6V6.75ZM18 5.25H17V6.75H18V5.25Z"
                                    fill="#ffffff" />
                                <circle cx="12" cy="6" r="1" fill="#ffffff" />
                            </svg>
                        </label> --}}
                        <div class="absolute cursor-pointer z-10 w-full">
                            <img src="images/avatar.png"
                                class="rounded-full w-full bordder-2 border-white shadow-custom" alt="user"
                                loading="lazy" />
                        </div>
                    </div>
                    <div class="flex-1 mx-2">
                        <h3 class="font-bold text-black mb-0 line-clamp-1">{{ $user->nama }}</h3>
                        <span class="text-sm text-gray-400 line-clamp-1">{{ $user->email }}</span>
                    </div>
                </div>

                @include('layouts.component')
            </div>
        </div>
        <div class="xl:w-9/12 md:w-full py-4">
            <div class="my-6 gap-6">
                <div class="row justify-content-between mb-4">
                    <div class="col-md-6">
                        <h3 class="text-black font-semibold text-lg md:text-xl mb-4">List Paket
                        </h3>
                    </div>
                    <div class="col-md-6 text-end">
                        <a href="{{ route('paket.create') }}" class="btn btn-primary">
                            <i class="fas fa-plus"></i> Tambah Paket
                        </a>
                    </div>
                </div>

                <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
                    <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
                        <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                            <tr>
                                <th scope="col" class="px-6 py-3">Nama Paket</th>
                                <th scope="col" class="px-6 py-3">Harga Paket</th>
                                <th scope="col" class="px-6 py-3">Harga Persentase</th>
                                <th scope="col" class="px-6 py-3">Tanggal awal</th>
                                <th scope="col" class="px-6 py-3">Tanggal akhir</th>
                                <th scope="col" class="px-6 py-3">Status</th>
                                <th scope="col" class="px-6 py-3">Dibuat Oleh</th>
                                <th scope="col" class="px-6 py-3">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($getPaket as $paket)
                            <tr
                                class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700 border-gray-200">
                                <th scope="row"
                                    class="{{ $paket->sts == 1 ? 'text-green-500' : ' text-red-500' }} px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                                    {{ $paket->nama_paket }}
                                </th>
                                <td class="px-6 py-4">
                                    Rp {{ number_format($paket->harga_paket, 0, ',', '.') }}
                                </td>
                                <td class="px-6 py-4">
                                    Rp {{ number_format($paket->total_harga_konten, 0, ',', '.') }}
                                </td>
                                <td class="px-6 py-4">
                                    {{ \Carbon\Carbon::parse($paket->tgl_awal)->format('d M Y') }}
                                </td>
                                <td class="px-6 py-4">
                                    {{ \Carbon\Carbon::parse($paket->tgl_akhir)->format('d M Y') }}
                                </td>
                                <td class="px-6 py-4">
                                    <span
                                        class="{{ $paket->sts == 1 ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }} text-xs font-medium px-2.5 py-0.5 rounded-full">
                                        {{ $paket->sts == 1 ? "Aktif" : "Tidak Aktif" }}
                                    </span>
                                </td>
                                <td class="px-6 py-4">
                                    {{ $paket->created_by }}
                                </td>
                                <td class="px-6 py-4">
                                    <div class="flex items-center space-x-2">
                                        @if($paket->sts == 1)

                                        <a href="{{ route('paketDetail.page',[$paket->id_paket]) }}"
                                            class="text-blue-600 border border-blue-600 hover:bg-blue-50 px-3 py-1.5 rounded-md text-sm font-medium transition-colors duration-200">
                                            Detail
                                        </a>
                                        @endif
                                        <a href="{{ route('paket.edit',[$paket->id_paket]) }}"
                                            class="text-yellow-600 border border-yellow-600 hover:bg-yellow-50 px-3 py-1.5 rounded-md text-sm font-medium transition-colors duration-200">
                                            Edit
                                        </a>
                                        @if($paket->sts == 1)

                                        <a href="#" onclick="confirmDeletePaket(event, {{ $paket->id_paket }})"
                                            data-id="{{ $paket->id_paket }}"
                                            class="text-red-600 border border-red-600 hover:bg-red-50 px-3 py-1.5 rounded-md text-sm font-medium transition-colors duration-200">
                                            Delete
                                        </a>
                                        @endif
                                        @if($paket->sts == 0)

                                        <a href="#" onclick="confirmActivatePaket(event, {{ $paket->id_paket }})"
                                            data-id="{{ $paket->id_paket }}"
                                            class="text-green-600 border border-green-600 hover:bg-green-50 px-3 py-1.5 rounded-md text-sm font-medium transition-colors duration-200">
                                            Aktifkan
                                        </a>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>

                    <div class="px-6 py-4 bg-white border-t border-gray-200">
                        {{ $getPaket->onEachSide(1)->links('vendor.pagination.tailwind') }}
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
@endsection

@section('javascript')
<script>
    const currentUrl = window.location.href;
    // Buat URL object untuk manipulasi yang lebih mudah
    const urlObj = new URL(currentUrl);
    
    // Hapus www dari hostname jika ada
    if (urlObj.hostname.startsWith('www.')) {
        urlObj.hostname = urlObj.hostname.replace('www.', '');
    }
    
    document.getElementById('canonicalTag').href = urlObj.toString();
</script>

<script>
    function confirmDeletePaket(event, id) {
        event.preventDefault(); 
        if (confirm('Are you sure you want to delete this package?')) {
            deletePaket(id);
        }
    }
    
    function deletePaket(id) {
        const deleteBtn = document.querySelector(`[data-id="${id}"]`);
        if (deleteBtn) {
            deleteBtn.innerHTML = 'Deleting...';
            deleteBtn.classList.add('opacity-50', 'cursor-not-allowed');
        }

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $.ajax({
            url: `/deletePaket/${id}`, 
            type: "POST",
            data: {
                _method: 'DELETE', 
            }

        }).done(function(response) {
            if(response.code === 200){
                notifikasiBook.success(response.message); 
                
                setTimeout(() => {
                    window.location.reload();
                }, 2000);
            } else {
                notifikasiBook.error(response.message); 
            }
        }).fail(function(error) {
            notifikasiBook.error('Terjadi kesalahan saat memproses permintaan.');
            console.error('Terjadi kesalahan:', error);
        });
    }
</script>

<script>
    function confirmActivatePaket(event, id) {
        event.preventDefault(); 
        if (confirm('Are you sure you want to activate this package?')) {
            activePaket(id);
        }
    }
    
    function activePaket(id) {
        const deleteBtn = document.querySelector(`[data-id="${id}"]`);
        if (deleteBtn) {
            deleteBtn.innerHTML = 'Activating...';
            deleteBtn.classList.add('opacity-50', 'cursor-not-allowed');
        }

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $.ajax({
            url: `/aktifkanPaket/${id}`, 
            type: "POST",
            data: {
                _method: 'POST', 
            }

        }).done(function(response) {
            if(response.code === 200){
                notifikasiBook.success(response.message); 
                
                setTimeout(() => {
                    window.location.reload();
                }, 2000);
            } else {
                notifikasiBook.error(response.message); 
            }
        }).fail(function(error) {
            notifikasiBook.error('Terjadi kesalahan saat memproses permintaan.');
            console.error('Terjadi kesalahan:', error);
        });
    }
</script>
@endsection