@extends('backend.layouts.main')
@section('panel')

@php
    // Fungsi untuk membaca isi file CSS saat Edit Tema
    $cssDesktop = '';
    $cssMobile = '';
    if(isset($theme->warna) && \Illuminate\Support\Facades\File::exists(public_path($theme->warna))) {
        $cssDesktop = \Illuminate\Support\Facades\File::get(public_path($theme->warna));
    }
    if(isset($theme->warna_mobile) && \Illuminate\Support\Facades\File::exists(public_path($theme->warna_mobile))) {
        $cssMobile = \Illuminate\Support\Facades\File::get(public_path($theme->warna_mobile));
    }
@endphp
<div class="row">
    {{-- FORM EDIT TEMA --}}
    @if (Route::is('admin.website.theme.edit'))
    <div class="col-lg-4 mb-3">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">Edit Tema</h4>
                <form class="form p-t-20" enctype="multipart/form-data" action="{{ route('admin.website.theme.update', $theme->id) }}" method="POST">
                    @csrf
                    
                    <div class="form-group">
                        <label>Nama Tema</label>
                        <div class="input-group mb-3">
                            <input type="text" class="form-control" name="name" required value="{{ $theme->name }}">
                        </div>
                    </div>

                    <div class="form-group">
                        <label>Desktop CSS (Paste Kode CSS di sini)</label>
                        <small class="d-block text-muted mb-2">Cari CSS Desktop di: https://domain_target.com/assets/css/style.css</small>
                        <textarea class="form-control" name="warna" rows="6" placeholder="body { background: #000; }" {{ isset($theme->warna) ? '' : 'required' }}>{{ $cssDesktop }}</textarea>
                    </div>

                    <div class="form-group mt-3">
                        <label>Mobile CSS (Paste Kode CSS di sini)</label>
                        <small class="d-block text-muted mb-2">Cari CSS Mobile di: https://domain_target.com/assets/css/style-m.css</small>
                        <textarea class="form-control" name="warna_mobile" rows="6" placeholder="body { background: #000; }" {{ isset($theme->warna_mobile) ? '' : 'required' }}>{{ $cssMobile }}</textarea>
                    </div>

                    <hr>
                    <small class="text-danger">*Kosongkan file di bawah ini jika tidak ingin mengubah gambar.</small>

                    <div class="form-group mt-2">
                        <label>Thumbnail Tema <small>(Opsional)</small></label>
                        <input type="file" class="form-control mb-1" name="gambar" accept="image/*">
                        @if($theme->gambar) <img src="{{ asset('uploads/'.$theme->gambar) }}" width="80" style="border-radius: 5px;"> @endif
                    </div>
                    <div class="form-group">
                        <label>Jackpot IMG (Global)</label>
                        <small class="d-block text-muted mb-2">domain_target/assets/img/progressive-jackpot-text.png</small>
                        <input type="file" class="form-control mb-1" name="jackpot" accept="image/*">
                        @if($theme->jackpot) <img src="{{ asset('uploads/'.$theme->jackpot) }}" height="30" style="background:#333; padding:2px; border-radius:3px;"> @endif
                    </div>
                    <div class="form-group">
                        <label>Jackpot Desktop BG</label>
                        <small class="d-block text-muted mb-2">domain_target/assets/img/progressive-jackpot.webp</small>
                        <input type="file" class="form-control mb-1" name="jackpot_desktop" accept="image/*">
                        @if($theme->jackpot_desktop) <img src="{{ asset('uploads/'.$theme->jackpot_desktop) }}" height="30" style="border-radius:3px;"> @endif
                    </div>
                    <div class="form-group">
                        <label>Jackpot Mobile BG</label>
                        <small class="d-block text-muted mb-2">domain_target/assets/img/progressive-jackpot-m.png</small>
                        <input type="file" class="form-control mb-1" name="jackpot_mobile" accept="image/*">
                        @if($theme->jackpot_mobile) <img src="{{ asset('uploads/'.$theme->jackpot_mobile) }}" height="30" style="border-radius:3px;"> @endif
                    </div>
                    <div class="form-group">
                        <label>Download Icon</label>
                        <small class="d-block text-muted mb-2">domain_target/assets/img/download.webp</small>
                        <input type="file" class="form-control mb-1" name="download" accept="image/*">
                        @if($theme->download) <img src="{{ asset('uploads/'.$theme->download) }}" height="50"> @endif
                    </div>
                    <div class="form-group">
                        <label>Contact Icon</label>
                        <small class="d-block text-muted mb-2">domain_target/assets/img/contact.webp</small>
                        <input type="file" class="form-control mb-1" name="contact" accept="image/*">
                        @if($theme->contact) <img src="{{ asset('uploads/'.$theme->contact) }}" height="50"> @endif
                    </div>

                    <button type="submit" class="btn btn-primary m-r-10 mt-3" name="upload">Update Tema</button>
                    <a href="{{ route('admin.website.theme') }}" class="btn btn-secondary mt-3">Batal</a>
                </form>
            </div>
        </div>
    </div>

    {{-- FORM TAMBAH TEMA BARU --}}
    @else
    <div class="col-lg-4 mb-3">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">Tambah Tema Baru</h4>
                <form class="form p-t-20" enctype="multipart/form-data" action="{{ route('admin.website.theme.create') }}" method="POST">
                    @csrf
                    <div class="form-group">
                        <label>Nama Tema</label>
                        <div class="input-group mb-3">
                            <input type="text" class="form-control" name="name" required placeholder="Masukkan nama tema">
                        </div>
                    </div>

                    <div class="form-group">
                        <label>Desktop CSS (Paste Kode CSS di sini)</label>
                        <small class="d-block text-muted mb-2">Cari CSS Desktop di: https://domain_target.com/assets/css/style.css</small>
                        <textarea class="form-control" name="warna" rows="6" placeholder="body { background: #000; }" {{ isset($theme->warna) ? '' : 'required' }}>{{ $cssDesktop }}</textarea>
                    </div>

                    <div class="form-group mt-3">
                        <label>Mobile CSS (Paste Kode CSS di sini)</label>
                        <small class="d-block text-muted mb-2">Cari CSS Mobile di: https://domain_target.com/assets/css/style-m.css</small>
                        <textarea class="form-control" name="warna_mobile" rows="6" placeholder="body { background: #000; }" {{ isset($theme->warna_mobile) ? '' : 'required' }}>{{ $cssMobile }}</textarea>
                    </div>

                    <hr>

                    <div class="form-group mt-2">
                        <label>Thumbnail Tema <small>(Opsional)</small></label>
                        <input type="file" class="form-control" name="gambar" accept="image/*">
                    </div>
                    <div class="form-group">
                        <label>Jackpot IMG (Global)</label>
                        <small class="d-block text-muted mb-2">Cari di: domain_target/assets/img/progressive-jackpot-text.png</small>
                        <input type="file" class="form-control" name="jackpot" accept="image/*" required>
                    </div>
                    <div class="form-group">
                        <label>Jackpot Desktop BG</label>
                        <small class="d-block text-muted mb-2">Cari di: domain_target/assets/img/progressive-jackpot.webp</small>
                        <input type="file" class="form-control" name="jackpot_desktop" accept="image/*">
                    </div>
                    <div class="form-group">
                        <label>Jackpot Mobile BG</label>
                        <small class="d-block text-muted mb-2">Cari di: domain_target/assets/img/progressive-jackpot-m.png</small>
                        <input type="file" class="form-control" name="jackpot_mobile" accept="image/*">
                    </div>
                    <div class="form-group">
                        <label>Download Icon</label>
                        <small class="d-block text-muted mb-2">Cari di: domain_target/assets/img/download.webp</small>
                        <input type="file" class="form-control" name="download" accept="image/*">
                    </div>
                    <div class="form-group">
                        <label>Contact Icon</label>
                        <small class="d-block text-muted mb-2">Cari di: domain_target/assets/img/contact.webp</small>
                        <input type="file" class="form-control" name="contact" accept="image/*">
                    </div>

                    <button type="submit" class="btn btn-primary m-r-10 mt-3" name="upload">Submit Tema</button>
                </form>
            </div>
        </div>
    </div>
    @endif

    {{-- TABEL LIST TEMA --}}
    <div class="col-lg-8 mb-3">
        <div class="card mb-3">
            <div class="card-body">
                <h4 class="card-title">Select Active Theme</h4>
                <form class="form" action="{{ route('admin.website.theme.active') }}" method="POST">
                    @csrf
                    <div class="input-group">
                        <select name="status" class="form-control select2" required>
                            <option value=""> -- Pilih Tema -- </option>
                            @foreach ($themes as $item)
                                <option value="{{ $item->id }}" {{ $item->status == 'active' ? 'selected' : '' }}> {{ $item->name }} </option>
                            @endforeach
                        </select>
                        <button type="submit" class="btn btn-success" name="upload">Aktifkan Tema</button>
                    </div>
                </form>
            </div>
        </div>

        <div class="card">
            <div class="card-datatable table-responsive pt-3">
                <table id="default-datatable" class="table table-bordered table-sm table-hover">
                    <thead class="table-dark">
                        <tr>
                            <th class="text-center" style="vertical-align: middle;">#</th>
                            <th class="text-center" style="vertical-align: middle;">Nama Tema</th>
                            <th class="text-center" style="vertical-align: middle;">Thumbnail</th>
                            <th class="text-center" style="vertical-align: middle;">CSS (Desktop & Mobile)</th>
                            <th class="text-center" style="vertical-align: middle;">Jackpot (Global | D | M)</th>
                            <th class="text-center" style="vertical-align: middle;">Icons (DL | Contact)</th>
                            <th class="text-center" style="vertical-align: middle;">Status</th>
                            <th class="text-center" style="vertical-align: middle;">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($themes as $item)
                        <tr>
                            <th class="text-center" style="vertical-align: middle; font-size: 13px;">{{ $loop->iteration }}</th>
                            
                            {{-- NAMA TEMA --}}
                            <td style="vertical-align: middle; font-size: 13px; font-weight: bold; white-space: nowrap;">
                                {{ $item->name }}
                            </td>
        
                            {{-- THUMBNAIL TEMA --}}
                            <td class="text-center" style="vertical-align: middle;">
                                @if($item->gambar)
                                    <span class="text-muted">-</span>
                                @else
                                    <span class="text-muted">-</span>
                                @endif
                            </td>
        
                            {{-- CSS URLS (Dipotong agar tidak merusak tabel, tapi bisa diklik) --}}
                            <td style="vertical-align: middle; font-size: 11px; white-space: normal; max-width: 250px; word-wrap: break-word;">
                                <div style="margin-bottom: 3px;">
                                    <strong>D:</strong> 
                                    <a href="{{ $item->warna }}" target="_blank" class="text-primary text-decoration-none" title="{{ $item->warna }}">
                                        {{ \Illuminate\Support\Str::limit($item->warna, 35) }}
                                    </a>
                                </div>
                                <div>
                                    <strong>M:</strong> 
                                    <a href="{{ $item->warna_mobile }}" target="_blank" class="text-primary text-decoration-none" title="{{ $item->warna_mobile }}">
                                        {{ \Illuminate\Support\Str::limit($item->warna_mobile, 35) }}
                                    </a>
                                </div>
                            </td>
        
                            {{-- JACKPOT IMAGES (Global, Desktop, Mobile) --}}
                            <td class="text-center" style="vertical-align: middle; background: #fdfdfd;">
                                <div style="display: flex; justify-content: center; align-items: center; gap: 8px;">
                                    @if($item->jackpot) 
                                        <img style="height: 25px; background: #333; padding: 2px; border-radius: 3px;" src="{{ asset('uploads/'.$item->jackpot) }}" title="Jackpot Global"> 
                                    @else <span class="text-muted">-</span> @endif
                                    |
                                    @if($item->jackpot_desktop) 
                                        <img style="height: 25px; border-radius: 3px; border: 1px solid #ddd;" src="{{ asset('uploads/'.$item->jackpot_desktop) }}" title="Jackpot Desktop"> 
                                    @else <span class="text-muted">-</span> @endif
                                    |
                                    @if($item->jackpot_mobile) 
                                        <img style="height: 25px; border-radius: 3px; border: 1px solid #ddd;" src="{{ asset('uploads/'.$item->jackpot_mobile) }}" title="Jackpot Mobile"> 
                                    @else <span class="text-muted">-</span> @endif
                                </div>
                            </td>
        
                            {{-- ICONS (Download & Contact) --}}
                            <td class="text-center" style="vertical-align: middle;">
                                <div style="display: flex; justify-content: center; align-items: center; gap: 8px;">
                                    @if($item->download) 
                                        <img style="height: 30px; border-radius: 3px;" src="{{ asset('uploads/'.$item->download) }}" title="Icon Download"> 
                                    @else <span class="text-muted">-</span> @endif
                                    |
                                    @if($item->contact) 
                                        <img style="height: 30px; border-radius: 3px;" src="{{ asset('uploads/'.$item->contact) }}" title="Icon Contact"> 
                                    @else <span class="text-muted">-</span> @endif
                                </div>
                            </td>
        
                            {{-- STATUS --}}
                            <td class="text-center" style="vertical-align: middle; font-size: 13px;">
                                @if($item->status == 'active')
                                    <span class="badge bg-success">Active</span>
                                @else
                                    <span class="badge bg-secondary">Disable</span>
                                @endif
                            </td>
        
                            {{-- AKSI --}}
                            <td class="text-center" style="vertical-align: middle;">
                                <a href="{{ route('admin.website.theme.edit', $item->id) }}" class="btn btn-sm btn-primary" title="Edit"><i class="mdi mdi-pencil"></i></a>
                                <a href="{{ route('admin.website.theme.delete', $item->id) }}" class="btn btn-sm btn-danger" onclick="return confirm('Yakin ingin menghapus tema ini?');" title="Hapus"><i class="mdi mdi-trash-can"></i></a>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection