@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>
                    <a href="{{ route('index.page') }}"
                        class="ms-2 text-xs inline-flex items-center text-xs text-primary hover:text-primary-dark">List
                        Paket</a>
                </div>
            </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">Detail
                        {{ $paket->nama_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="{{ asset('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">Detail {{ $paket->nama_paket }}
                        </h3>
                    </div>
                    <div class="col-md-6 text-end">
                        <a href="{{ route('detail.create', $paket->id) }}" class="btn btn-primary">
                            <i class="fas fa-plus"></i> Tambah Konten
                        </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">Judul Konten</th>
                                <th scope="col" class="px-6 py-3">Harga Buku</th>
                                <th scope="col" class="px-6 py-3">Harga Asli</th>
                                <th scope="col" class="px-6 py-3">Urutan</th>
                                <th scope="col" class="px-6 py-3">Status</th>
                                <th scope="col" class="px-6 py-3">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($buku 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">

                                <td class="px-6 py-4">
                                    {{ $paket->judul }}
                                </td>
                                <td class="px-6 py-4">
                                    {{ $paket->harga_perbuku }}
                                </td>
                                <td class="px-6 py-4">
                                    {{ $paket->harga_asli }}
                                </td>
                                <td class="px-6 py-4">
                                    <input type="number" class="urutan-input border rounded p-1 w-16" min="1"
                                        value="{{ $paket->urutan }}" data-id="{{ $paket->id_detail }}"
                                        data-current="{{ $paket->urutan }}">
                                </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">
                                    <div class="flex items-center space-x-2">
                                        {{-- <a
                                            href="{{ route('detailPaket.edit', ['id_paket' => $paket->id_paket, 'id_detail' => $paket->id_detail]) }}"
                                            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)
                                        <button onclick="confirmDeletePaket(event, {{ $paket->id_detail }})"
                                            data-id="{{ $paket->id_detail }}"
                                            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-btn">
                                            Delete
                                        </button>
                                        @endif
                                        @if($paket->sts == 0)
                                        <button onclick="confirmActivatePaket(event, {{ $paket->id_detail }})"
                                            data-id="{{ $paket->id_detail }}"
                                            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
                                        </button>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>

                    <div class="px-6 py-4 bg-white border-t border-gray-200">
                        {{ $buku->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?')) {
            deleteDetail(id);
        }
    }

    function deleteDetail(id) {
        // Temukan tombol berdasarkan ID
        const deleteBtn = document.querySelector(`button[data-id="${id}"]`);
        
        if (deleteBtn) {
            // Update tampilan tombol
            deleteBtn.innerHTML = '<span class="flex items-center justify-center">Deleting...</span>';
            deleteBtn.classList.add('opacity-50', 'cursor-not-allowed');
            deleteBtn.disabled = true;
            
        }

        // Lakukan AJAX request
        $.ajax({
            url: `/paket/deleteDetail/${id}`,
            type: "DELETE",
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        }).done(function(response) {        
            if(response.code === 200){
                notifikasiBook.success(response.message);
                
                if (response.reload) {
                    setTimeout(() => {
                        window.location.reload();
                    }, 1500);
                }
            } else {
                notifikasiBook.error(response.message || 'Terjadi kesalahan');
                resetButton(deleteBtn);
            }
        }).fail(function(error) {
            notifikasiBook.dismiss(loadingNotif);
            const errorMsg = error.responseJSON?.message || 'Terjadi kesalahan saat memproses permintaan.';
            notifikasiBook.error(errorMsg);
            console.error('Error:', error);
            resetButton(deleteBtn);
        });
    }

    function resetButton(btn) {
        if (btn) {
            btn.innerHTML = 'Delete';
            btn.classList.remove('opacity-50', 'cursor-not-allowed');
            btn.disabled = false;
        }
    }
</script>

<script>
    function confirmActivatePaket(event, id) {
        event.preventDefault(); 
        if (confirm('Are you sure you want to activate this package?')) {
            activePaket(id);
        }
    }
    
    function activePaket(id) {
        // Temukan tombol dengan selector yang lebih spesifik
        const activateBtn = document.querySelector(`button[data-id="${id}"]`);
        
        if (activateBtn) {
            // Update teks dan tambahkan spinner
            activateBtn.innerHTML = `
                <span class="flex items-center justify-center gap-2">
                    Activating...
                    
                </span>
            `;
            activateBtn.classList.add('opacity-50', 'cursor-not-allowed');
            activateBtn.disabled = true;
        }

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

        // Kirim request
        $.ajax({
            url: `/aktifkanDetail/${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);
                resetActivateButton(activateBtn);
            }
        }).fail(function(error) {
            notifikasiBook.error('Terjadi kesalahan saat memproses permintaan.');
            console.error('Terjadi kesalahan:', error);
            resetActivateButton(activateBtn);
        });
    }

    // Fungsi untuk reset tombol ke state semula
    function resetActivateButton(btn) {
        if (btn) {
            btn.innerHTML = 'Activate';
            btn.classList.remove('opacity-50', 'cursor-not-allowed');
            btn.disabled = false;
        }
    }
</script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.urutan-input').forEach(input => {
        input.addEventListener('change', function() {
            const id = this.getAttribute('data-id');
            const newPosition = parseInt(this.value);
            const currentPosition = parseInt(this.getAttribute('data-current'));
            
            if (isNaN(newPosition) || newPosition < 1) {
                alert('Posisi harus angka positif');
                this.value = currentPosition;
                return;
            }
            
            if (newPosition === currentPosition) return;
            
            fetch('{{ route("paket.move-item") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({
                    id_detail: id,
                    new_position: newPosition
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    window.location.reload();
                } else {
                    alert(data.message || 'Gagal mengubah urutan');
                    this.value = currentPosition;
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Terjadi kesalahan');
                this.value = currentPosition;
            });
        });
    });
});
</script>


@endsection