@extends('layouts.app')

@section('content')
    <style>
        /* Custom styles for all buttons */
        .btn-custom {
            transition: all 0.3s ease;
            border-radius: 50px;
            /* For pill shape */
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 1.5rem;
            border: none;
            color: white;
            /* All buttons will have white text */
        }

        /* Style for the 'View' button from previous example */
        .btn-view-custom {
            background: linear-gradient(135deg, #1e90ff, #38bdf8);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }

        .btn-view-custom:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            background: linear-gradient(135deg, #38bdf8, #1e90ff);
        }

        /* Style for the 'Edit' button from previous example */
        .btn-edit-custom {
            background: linear-gradient(135deg, #ffa500, #fbbf24);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }

        .btn-edit-custom:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            background: linear-gradient(135deg, #fbbf24, #ffa500);
        }

        /* Style for the new 'Detail' button */
        .btn-detail-custom {
            background: linear-gradient(135deg, #4285F4, #669df6);
            /* Google Blue */
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }

        .btn-detail-custom:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            background: linear-gradient(135deg, #669df6, #4285F4);
        }

        /* Style for the new 'Unclaim' button */
        .btn-unclaim-custom {
            background: linear-gradient(135deg, #dc3545, #e36a76);
            /* Bootstrap Red */
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }

        .btn-unclaim-custom:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            background: linear-gradient(135deg, #e36a76, #dc3545);
        }

        /* Style for the new 'Selesaikan Konflik' button */
        .btn-conflict-custom {
            background: linear-gradient(135deg, #ffc107, #ffd65c);
            /* Bootstrap Yellow */
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }

        .btn-conflict-custom:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            background: linear-gradient(135deg, #ffd65c, #ffc107);
        }
    </style>
    <div class="page-wrapper">
        <div class="page-header d-print-none">
            <div class="container-xl">
                <div class="row g-2 align-items-center">
                    <div class="col">
                        <div class="page-pretitle">Ticketing</div>
                        <h2 class="page-title">Riwayat Klaim Hak Cipta</h2>
                    </div>
                    <div class="col-auto ms-auto">
                        <div class="btn-list">
                            <a href="{{ route('claims.create') }}" class="btn btn-primary d-none d-sm-inline-block">
                                <i class="ti ti-plus me-2"></i>Ajukan Klaim Baru
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="page-body">
            <div class="container-xl">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Daftar Klaim Saya</h3>
                        {{-- <div class="card-actions">
                            <div class="btn-group">
                                <button class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown">
                                    <i class="ti ti-filter me-1"></i>Filter
                                </button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">Semua Status</a>
                                    <a class="dropdown-item" href="#">Pending</a>
                                    <a class="dropdown-item" href="#">Approved</a>
                                    <a class="dropdown-item" href="#">Rejected</a>
                                </div>
                            </div>
                        </div> --}}
                        <div class="card-actions">
                            <form action="{{ route('claims.index') }}" method="GET" class="d-flex">
                                <select name="status" class="form-select me-2" onchange="this.form.submit()">
                                    <option value="">All Statuses</option>
                                    <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Pending
                                    </option>
                                    <option value="processing" {{ request('status') == 'processing' ? 'selected' : '' }}>
                                        Sedang
                                        Diproses</option>
                                    <option value="reviewing" {{ request('status') == 'reviewing' ? 'selected' : '' }}>
                                        Sedang
                                        Direview</option>
                                    <option value="success" {{ request('status') == 'success' ? 'selected' : '' }}>Selesai /
                                        Approved
                                    </option>
                                    <option value="rejected" {{ request('status') == 'rejected' ? 'selected' : '' }}>Ditolak
                                    </option>
                                    <option value="conflict" {{ request('status') == 'conflict' ? 'selected' : '' }}>Konflik
                                    </option>
                                    <option value="unclaim" {{ request('status') == 'unclaim' ? 'selected' : '' }}>Unclaim
                                    </option>
                                </select>
                                <div class="input-group">
                                    <input type="text" name="search" class="form-control" placeholder="Search claims..."
                                        value="{{ request('search') }}">
                                    <button type="submit" class="btn btn-primary">
                                        <i class="ti ti-search"></i>
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="card-body border-bottom py-3">
                        <div class="d-flex">
                            <div class="text-muted">
                                Tampilkan
                                <div class="mx-2 d-inline-block">
                                    <select class="form-select form-select-sm">
                                        <option value="10">10</option>
                                        <option value="25">25</option>
                                        <option value="50">50</option>
                                        <option value="100">100</option>
                                    </select>
                                </div>
                                entri
                            </div>
                            <div class="ms-auto text-muted">
                                Cari:
                                <div class="ms-2 d-inline-block">
                                    <input type="text" class="form-control form-control-sm" placeholder="Cari...">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-vcenter card-table table-hover">
                            <thead>
                                <tr>
                                    <th>ID Klaim</th>
                                    <th>Judul Lagu</th>
                                    <th>URL Youtube</th>
                                    <th>Tanggal Pengajuan</th>
                                    <th>Status</th>
                                    <th class="w-1">Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($claims as $claim)
                                    <tr>
                                        <td>{{ Str::limit($claim->id, 8, '') }}</td>
                                        <td>{{ $claim->song ? $claim->song->title : 'N/A' }}</td>
                                        <td><a href="{{ $claim->youtube_url }}"
                                                target="_blank">{{ Str::limit($claim->youtube_url, 40, '...') }}</a></td>
                                        <td>{{ $claim->created_at->format('d M Y') }}</td>
                                        <td>
                                            @if ($claim->status == 'pending')
                                                <span class="badge bg-yellow">Dalam Antrian</span>
                                            @elseif ($claim->status == 'processing')
                                                <span class="badge bg-green">Sedang Di Proses</span>
                                            @elseif ($claim->status == 'reviewing')
                                                <span class="badge bg-blue">Sedang Di Review</span>
                                            @elseif($claim->status == 'success')
                                                <span class="badge bg-green">Sukses</span>
                                            @elseif ($claim->status == 'rejected')
                                                <span class="badge bg-red">Ditolak</span>
                                            @elseif ($claim->status == 'conflict')
                                                <span class="badge bg-red">Konflik</span>
                                            @elseif ($claim->status == 'unclaim')
                                                <span class="badge bg-red">Unclaim</span>
                                            @endif
                                        </td>
                                        <td>
                                            <div class="d-flex gap-2">
                                                <a href="{{ route('claims.show', $claim->id) }}"
                                                    class="btn-custom btn-detail-custom">
                                                    <i class="fas fa-eye"></i> Detail
                                                </a>
                                                @if ($claim->status == 'approved')
                                                    <button class="btn-custom btn-unclaim-custom"
                                                        onclick="confirmUnclaim('{{ $claim->song->title ?? 'N/A' }}', '{{ $claim->id }}')">
                                                        <i class="fas fa-ban"></i> Unclaim
                                                    </button>
                                                @elseif ($claim->status == 'conflict')
                                                    <a href="{{ route('claims.resolve-conflict-form', $claim->id) }}"
                                                        class="btn-custom btn-conflict-custom">
                                                        <i class="fas fa-exclamation-triangle"></i>Konflik
                                                    </a>
                                                @endif
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="6" class="text-center">Tidak ada klaim hak cipta yang ditemukan.
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                    <div class="card-footer d-flex align-items-center">
                        {{-- Pagination can go here if you're using it --}}
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        function confirmUnclaim(songTitle, claimId) {
            Swal.fire({
                title: 'Konfirmasi Unclaim',
                html: `<div class="text-center mb-3">
                    <i class="ti ti-alert-triangle text-danger" style="font-size: 3rem;"></i>
                </div>
                <p>Anda yakin ingin membatalkan klaim hak cipta untuk lagu <strong>${songTitle}</strong>?</p>
                <p class="text-danger">Tindakan ini tidak dapat dibatalkan dan Anda harus mengajukan klaim baru jika diperlukan di masa mendatang.</p>`,
                icon: false,
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#6c757d',
                confirmButtonText: '<i class="ti ti-x me-2"></i>Ya, Batalkan Klaim',
                cancelButtonText: 'Batal',
                customClass: {
                    confirmButton: 'btn btn-danger me-2',
                    cancelButton: 'btn btn-secondary ms-2'
                },
                buttonsStyling: false
            }).then((result) => {
                if (result.isConfirmed) {
                    fetch(`/claims/${claimId}/unclaim`, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            },
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                Swal.fire({
                                    title: 'Berhasil!',
                                    text: data.message ||
                                        `Klaim untuk lagu "${songTitle}" telah dibatalkan.`,
                                    icon: 'success',
                                    confirmButtonText: 'OK',
                                    confirmButtonColor: '#206bc4',
                                    customClass: {
                                        confirmButton: 'btn btn-primary'
                                    },
                                    buttonsStyling: false
                                }).then(() => {
                                    window.location.reload();
                                });
                            } else {
                                Swal.fire({
                                    title: 'Gagal!',
                                    text: data.message || 'Terjadi kesalahan saat membatalkan klaim.',
                                    icon: 'error',
                                    confirmButtonText: 'OK',
                                    confirmButtonColor: '#206bc4',
                                    customClass: {
                                        confirmButton: 'btn btn-primary'
                                    },
                                    buttonsStyling: false
                                });
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error);
                            Swal.fire({
                                title: 'Error!',
                                text: 'Tidak dapat terhubung ke server.',
                                icon: 'error',
                                confirmButtonText: 'OK',
                                confirmButtonColor: '#206bc4',
                                customClass: {
                                    confirmButton: 'btn btn-primary'
                                },
                                buttonsStyling: false
                            });
                        });
                }
            });
        }
    </script>
@endsection