@extends('layouts.admin')

@section('title', 'Banner Applications Management')

@section('content')
<div class="row">
    <div class="col-12">
        <div class="card shadow-none">
            <div class="card-header bg-white">
                <h3 class="card-title font-weight-bold">Banner Applications List</h3>
                <div class="card-tools">
                    <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#modal-create">
                        <i class="fas fa-plus"></i> Add Application
                    </button>
                </div>
            </div>
            <!-- /.card-header -->
            <div class="card-body">
                @if(session('success'))
                    <div class="alert alert-success alert-dismissible fade show py-2" role="alert">
                        {{ session('success') }}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                @endif
                <table id="dataTable" class="table table-bordered table-striped table-sm">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Primary Image</th>
                            <th>Name</th>
                            <th>Applicant</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($applications as $app)
                        <tr>
                            <td>{{ $loop->iteration }}</td>
                            <td>
                                @if($app->primary_image_url)
                                    <img src="{{ $app->primary_image_url }}" alt="Primary Image" style="height: 40px; border-radius: 4px;">
                                @else
                                    <span class="text-muted">No Image</span>
                                @endif
                            </td>
                            <td>{{ $app->name }}</td>
                            <td>{{ $app->user->fullname ?? 'Unknown' }}</td>
                            <td>
                                <button type="button" class="btn btn-info btn-xs btn-edit" 
                                    data-id="{{ $app->id }}"
                                    data-name="{{ $app->name }}"
                                    data-user="{{ $app->id_user }}"
                                    data-desc="{{ $app->desc }}"
                                    data-toggle="modal" data-target="#modal-edit">
                                    <i class="fas fa-edit"></i> Edit
                                </button>
                                <form action="{{ route('admin.banner-applications.destroy', $app->id) }}" method="POST" style="display: inline-block;">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-danger btn-xs" onclick="return confirm('Are you sure?')">
                                        <i class="fas fa-trash"></i> Delete
                                    </button>
                                </form>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <!-- /.card-body -->
        </div>
        <!-- /.card -->
    </div>
</div>

<!-- Create Modal -->
<div class="modal fade" id="modal-create">
    <div class="modal-dialog">
        <form action="{{ route('admin.banner-applications.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="modal-content">
                <div class="modal-header py-2 bg-white">
                    <h4 class="modal-title" style="font-size: 1.1rem;">Add Application</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>Applicant (User)</label>
                        <select name="id_user" class="form-control select2" required style="width: 100%;">
                            @foreach(\App\Models\User::all() as $user)
                                <option value="{{ $user->id }}">{{ $user->fullname }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Name</label>
                        <input type="text" name="name" class="form-control" placeholder="Enter application name" required>
                    </div>
                    <div class="form-group">
                        <label>Primary Image</label>
                        <input type="file" name="primary_image" class="form-control-file" required>
                    </div>
                    <div class="form-group">
                        <label>Secondary Image (Optional)</label>
                        <input type="file" name="secondary_image" class="form-control-file">
                    </div>
                    <div class="form-group">
                        <label>Description</label>
                        <textarea name="desc" class="form-control" rows="3" placeholder="Enter application description"></textarea>
                    </div>
                </div>
                <div class="modal-footer justify-content-between py-2">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Save Application</button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Edit Modal -->
<div class="modal fade" id="modal-edit">
    <div class="modal-dialog">
        <form id="edit-form" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')
            <div class="modal-content">
                <div class="modal-header py-2 bg-white">
                    <h4 class="modal-title" style="font-size: 1.1rem;">Edit Application</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>Applicant (User)</label>
                        <select name="id_user" id="edit-user" class="form-control select2" required style="width: 100%;">
                            @foreach(\App\Models\User::all() as $user)
                                <option value="{{ $user->id }}">{{ $user->fullname }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Name</label>
                        <input type="text" name="name" id="edit-name" class="form-control" placeholder="Enter application name" required>
                    </div>
                    <div class="form-group">
                        <label>Primary Image (Optional)</label>
                        <input type="file" name="primary_image" class="form-control-file">
                    </div>
                    <div class="form-group">
                        <label>Secondary Image (Optional)</label>
                        <input type="file" name="secondary_image" class="form-control-file">
                    </div>
                    <div class="form-group">
                        <label>Description</label>
                        <textarea name="desc" id="edit-desc" class="form-control" rows="3" placeholder="Enter application description"></textarea>
                    </div>
                </div>
                <div class="modal-footer justify-content-between py-2">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-info">Update Application</button>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
    $(document).ready(function () {
        // Initialize Select2
        $('.select2').select2({
            theme: 'bootstrap4'
        });

        if (!$.fn.DataTable.isDataTable('#dataTable')) {
            $('#dataTable').DataTable({
                "paging": true,
                "lengthChange": true,
                "searching": true,
                "ordering": true,
                "info": true,
                "autoWidth": false,
                "responsive": true,
            });
        }

        $(document).on('click', '.btn-edit', function() {
            const id = $(this).data('id');
            const name = $(this).data('name');
            const user = $(this).data('user');
            const desc = $(this).data('desc');

            $('#edit-form').attr('action', `/admin/banner-applications/${id}`);
            $('#edit-name').val(name);
            $('#edit-user').val(user).trigger('change');
            $('#edit-desc').val(desc);
        });
    });
</script>
@endpush