@extends('adminlte::page')

@section('title', 'Iklan')

@section('content_header')
    <h1><i class="fas fa-bullhorn mr-2"></i>Iklan</h1>
@stop

@section('content')
    @if (session('success'))
        <div class="alert alert-success alert-dismissible">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            {{ session('success') }}
        </div>
    @endif

    <div class="row">
        <!-- Form Tambah Iklan -->
        <div class="col-md-5">
            <div class="card card-outline card-primary">
                <div class="card-header">
                    <h3 class="card-title"><i class="fas fa-plus-circle mr-1"></i> Tambah Iklan</h3>
                </div>
                <div class="card-body">
                    @if ($errors->any())
                        <div class="alert alert-danger alert-dismissible">
                            <button type="button" class="close" data-dismiss="alert">&times;</button>
                            <ul class="mb-0">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <form action="{{ route('admin.iklan.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf

                        <div class="form-group">
                            <label>Tajuk Iklan <span class="text-danger">*</span></label>
                            <input type="text" name="tajuk" class="form-control @error('tajuk') is-invalid @enderror"
                                value="{{ old('tajuk') }}" placeholder="Masukkan tajuk iklan">
                            @error('tajuk')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label>Kandungan <span class="text-danger">*</span></label>
                            <textarea name="kandungan" rows="4" class="form-control @error('kandungan') is-invalid @enderror"
                                placeholder="Masukkan kandungan iklan">{{ old('kandungan') }}</textarea>
                            @error('kandungan')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label>Target Iklan <span class="text-danger">*</span></label>
                            <div class="@error('target_role') is-invalid @enderror">
                                @foreach (['admin' => 'Admin', 'pemohon' => 'Pemohon', 'checker' => 'Checker', 'supervisor' => 'Supervisor'] as $value => $label)
                                    <div class="custom-control custom-checkbox mb-1">
                                        <input type="checkbox" class="custom-control-input" id="role_{{ $value }}"
                                            name="target_role[]" value="{{ $value }}"
                                            {{ is_array(old('target_role')) && in_array($value, old('target_role')) ? 'checked' : '' }}>
                                        <label class="custom-control-label"
                                            for="role_{{ $value }}">{{ $label }}</label>
                                    </div>
                                @endforeach
                            </div>
                            @error('target_role')
                                <div class="text-danger small mt-1">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label>Tarikh Mula <span class="text-danger">*</span></label>
                                <input type="date" name="tarikh_mula"
                                    class="form-control @error('tarikh_mula') is-invalid @enderror"
                                    value="{{ old('tarikh_mula', date('Y-m-d')) }}">
                                @error('tarikh_mula')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="form-group col-md-6">
                                <label>Tarikh Tamat</label>
                                <input type="date" name="tarikh_tamat"
                                    class="form-control @error('tarikh_tamat') is-invalid @enderror"
                                    value="{{ old('tarikh_tamat') }}">
                                @error('tarikh_tamat')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="custom-control custom-switch">
                                <input type="checkbox" class="custom-control-input" id="is_aktif" name="is_aktif"
                                    value="1" {{ old('is_aktif', '1') ? 'checked' : '' }}>
                                <label class="custom-control-label" for="is_aktif">Aktifkan Iklan</label>
                            </div>
                        </div>

                        <div class="form-group">
                            <label>Lampiran <small class="text-muted">(PDF, Word, Gambar – maks. 5MB)</small></label>
                            <div class="custom-file">
                                <input type="file" class="custom-file-input @error('lampiran') is-invalid @enderror"
                                    id="lampiran" name="lampiran" accept=".pdf,.doc,.docx,.jpg,.jpeg,.png">
                                <label class="custom-file-label" for="lampiran">Pilih fail...</label>
                            </div>
                            @error('lampiran')
                                <div class="text-danger small mt-1">{{ $message }}</div>
                            @enderror
                        </div>

                        <button type="submit" class="btn btn-primary btn-block">
                            <i class="fas fa-paper-plane mr-1"></i> Terbitkan Iklan
                        </button>
                    </form>
                </div>
            </div>
        </div>

        <!-- Senarai Iklan -->
        <div class="col-md-7">
            <div class="card card-outline card-primary">
                <div class="card-header">
                    <h3 class="card-title"><i class="fas fa-list mr-1"></i> Senarai Iklan</h3>
                </div>
                <div class="card-body table-responsive p-0">
                    <table class="table table-hover table-striped">
                        <thead class="thead-dark">
                            <tr>
                                <th width="40">#</th>
                                <th>Tajuk</th>
                                <th>Target</th>
                                <th>Tarikh</th>
                                <th width="60">Lampiran</th>
                                <th width="60">Status</th>
                                <th width="90">Tindakan</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($senarai as $index => $iklan)
                                <tr>
                                    <td>{{ $index + 1 }}</td>
                                    <td>
                                        <strong>{{ $iklan->tajuk }}</strong>
                                        <div class="text-muted small">{{ Str::limit($iklan->kandungan, 60) }}</div>
                                    </td>
                                    <td>
                                        @foreach ($iklan->target_role as $role)
                                            <span class="badge badge-info mb-1">{{ ucfirst($role) }}</span>
                                        @endforeach
                                    </td>
                                    <td>
                                        <small>{{ $iklan->tarikh_mula->format('d/m/Y') }}</small><br>
                                        @if ($iklan->tarikh_tamat)
                                            <small class="text-muted">hingga
                                                {{ $iklan->tarikh_tamat->format('d/m/Y') }}</small>
                                        @else
                                            <small class="text-muted">-</small>
                                        @endif
                                    </td>
                                    <td>
                                        @if ($iklan->lampiran)
                                            <a href="{{ Storage::url($iklan->lampiran) }}" target="_blank"
                                                class="btn btn-xs btn-outline-secondary" title="Lihat Lampiran">
                                                <i class="fas fa-paperclip"></i>
                                            </a>
                                        @else
                                            <span class="text-muted">-</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if ($iklan->is_aktif)
                                            <span class="badge badge-success">Aktif</span>
                                        @else
                                            <span class="badge badge-secondary">Tidak Aktif</span>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="d-flex">
                                            <button type="button" class="btn btn-warning btn-sm mr-1"
                                                data-toggle="modal" data-target="#modalEdit"
                                                data-id="{{ $iklan->id }}" data-tajuk="{{ $iklan->tajuk }}"
                                                data-kandungan="{{ $iklan->kandungan }}"
                                                data-target-role="{{ json_encode($iklan->target_role) }}"
                                                data-tarikh-mula="{{ $iklan->tarikh_mula->format('Y-m-d') }}"
                                                data-tarikh-tamat="{{ $iklan->tarikh_tamat ? $iklan->tarikh_tamat->format('Y-m-d') : '' }}"
                                                data-is-aktif="{{ $iklan->is_aktif ? '1' : '0' }}"
                                                data-lampiran="{{ $iklan->lampiran ? Storage::url($iklan->lampiran) : '' }}"
                                                data-lampiran-nama="{{ $iklan->lampiran ? basename($iklan->lampiran) : '' }}">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <form action="{{ route('admin.iklan.destroy', $iklan->id) }}" method="POST"
                                                onsubmit="return confirm('Padam iklan ini?')">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-danger btn-sm">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="text-center text-muted">Tiada iklan ditemui.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Edit -->
    <div class="modal fade" id="modalEdit" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header bg-warning">
                    <h5 class="modal-title"><i class="fas fa-edit mr-1"></i> Kemaskini Iklan</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <form id="formEdit" method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    <div class="modal-body">
                        <div class="form-group">
                            <label>Tajuk Iklan <span class="text-danger">*</span></label>
                            <input type="text" name="tajuk" id="edit_tajuk" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label>Kandungan <span class="text-danger">*</span></label>
                            <textarea name="kandungan" id="edit_kandungan" rows="4" class="form-control" required></textarea>
                        </div>
                        <div class="form-group">
                            <label>Target Iklan <span class="text-danger">*</span></label>
                            @foreach (['admin' => 'Admin', 'pemohon' => 'Pemohon', 'checker' => 'Checker', 'supervisor' => 'Supervisor'] as $value => $label)
                                <div class="custom-control custom-checkbox mb-1">
                                    <input type="checkbox" class="custom-control-input edit-role-check"
                                        id="edit_role_{{ $value }}" name="target_role[]"
                                        value="{{ $value }}">
                                    <label class="custom-control-label"
                                        for="edit_role_{{ $value }}">{{ $label }}</label>
                                </div>
                            @endforeach
                        </div>
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label>Tarikh Mula <span class="text-danger">*</span></label>
                                <input type="date" name="tarikh_mula" id="edit_tarikh_mula" class="form-control"
                                    required>
                            </div>
                            <div class="form-group col-md-6">
                                <label>Tarikh Tamat</label>
                                <input type="date" name="tarikh_tamat" id="edit_tarikh_tamat" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Lampiran Baharu <small class="text-muted">(kosongkan jika tidak tukar – PDF, Word,
                                    Gambar – maks. 5MB)</small></label>
                            <div id="edit_lampiran_semasa" class="mb-1 d-none">
                                <small class="text-muted">Semasa: </small>
                                <a id="edit_lampiran_link" href="#" target="_blank" class="small"></a>
                            </div>
                            <div class="custom-file">
                                <input type="file" class="custom-file-input" id="edit_lampiran" name="lampiran"
                                    accept=".pdf,.doc,.docx,.jpg,.jpeg,.png">
                                <label class="custom-file-label" for="edit_lampiran">Pilih fail...</label>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="custom-control custom-switch">
                                <input type="checkbox" class="custom-control-input" id="edit_is_aktif" name="is_aktif"
                                    value="1">
                                <label class="custom-control-label" for="edit_is_aktif">Aktifkan Iklan</label>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">
                            <i class="fas fa-times mr-1"></i> Batal
                        </button>
                        <button type="submit" class="btn btn-warning">
                            <i class="fas fa-save mr-1"></i> Kemaskini
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@stop

@push('js')
    <script>
        $('#modalEdit').on('show.bs.modal', function(e) {
            var btn = $(e.relatedTarget);
            var id = btn.data('id');
            var tajuk = btn.data('tajuk');
            var kandungan = btn.data('kandungan');
            var targetRole = btn.data('target-role');
            var tarikhMula = btn.data('tarikh-mula');
            var tarikhTamat = btn.data('tarikh-tamat');
            var isAktif = btn.data('is-aktif');

            $('#edit_tajuk').val(tajuk);
            $('#edit_kandungan').val(kandungan);
            $('#edit_tarikh_mula').val(tarikhMula);
            $('#edit_tarikh_tamat').val(tarikhTamat);
            $('#edit_is_aktif').prop('checked', isAktif == '1');

            // Reset all checkboxes then tick the correct ones
            $('.edit-role-check').prop('checked', false);
            if (targetRole) {
                $.each(targetRole, function(i, role) {
                    $('#edit_role_' + role).prop('checked', true);
                });
            }

            var lampiran = btn.data('lampiran');
            var lampiranNama = btn.data('lampiran-nama');

            if (lampiran) {
                $('#edit_lampiran_link').attr('href', lampiran).text(lampiranNama);
                $('#edit_lampiran_semasa').removeClass('d-none');
            } else {
                $('#edit_lampiran_semasa').addClass('d-none');
                $('#edit_lampiran_link').attr('href', '#').text('');
            }

            // Reset file input label
            $('#edit_lampiran').val('');
            $('#edit_lampiran').next('.custom-file-label').text('Pilih fail...');

            var url = '{{ url('admin/iklan') }}/' + id;
            $('#formEdit').attr('action', url);
        });

        // Update custom-file-label when file selected
        $(document).on('change', '.custom-file-input', function() {
            var fileName = $(this).val().split('\\').pop();
            $(this).next('.custom-file-label').text(fileName || 'Pilih fail...');
        });
    </script>
@endpush
