@extends('layouts.admin')

@section('title', 'Banners 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">Banners 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 Banner
                    </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>Image</th>
                            <th>Title</th>
                            <th>Owner</th>
                            <th>Price</th>
                            <th>Discount</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($banners as $banner)
                        <tr>
                            <td>{{ $loop->iteration }}</td>
                            <td>
                                @if($banner->image_url)
                                    <img src="{{ $banner->image_url }}" alt="Banner" style="height: 40px; border-radius: 4px;">
                                @else
                                    <span class="text-muted">No Image</span>
                                @endif
                            </td>
                            <td>{{ $banner->title }}</td>
                            <td>{{ $banner->owner->fullname ?? 'Unknown' }}</td>
                            <td>RM {{ number_format($banner->price, 0, ',', '.') }}</td>
                            <td>{{ $banner->discount }}%</td>
                            <td>
                                <span class="badge badge-{{ $banner->status === 'active' ? 'success' : 'danger' }}">
                                    {{ ucfirst($banner->status) }}
                                </span>
                            </td>
                            <td>
                                <button type="button" class="btn btn-info btn-xs btn-edit" 
                                    data-id="{{ $banner->id }}"
                                    data-title="{{ $banner->title }}"
                                    data-owner="{{ $banner->id_owner }}"
                                    data-price="{{ $banner->price }}"
                                    data-discount="{{ $banner->discount }}"
                                    data-status="{{ $banner->status }}"
                                    data-toggle="modal" data-target="#modal-edit">
                                    <i class="fas fa-edit"></i> Edit
                                </button>
                                <form action="{{ route('admin.banners.destroy', $banner->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.banners.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 Banner</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>Owner</label>
                        <select name="id_owner" class="form-control select2" required style="width: 100%;">
                            @foreach($users as $user)
                                <option value="{{ $user->id }}">{{ $user->fullname }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Title</label>
                        <input type="text" name="title" class="form-control" placeholder="Enter banner title" required>
                    </div>
                    <div class="form-group">
                        <label>Image</label>
                        <input type="file" name="image" class="form-control-file" required>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Price (RM)</label>
                                <input type="number" name="price" class="form-control" value="0" placeholder="0">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Discount (%)</label>
                                <input type="number" name="discount" class="form-control" value="0" placeholder="0">
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Status</label>
                        <select name="status" class="form-control select2" style="width: 100%;">
                            <option value="active">Active</option>
                            <option value="inactive">Inactive</option>
                        </select>
                    </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 Banner</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 Banner</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>Owner</label>
                        <select name="id_owner" id="edit-owner" class="form-control select2" required style="width: 100%;">
                            @foreach($users as $user)
                                <option value="{{ $user->id }}">{{ $user->fullname }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Title</label>
                        <input type="text" name="title" id="edit-title" class="form-control" placeholder="Enter banner title" required>
                    </div>
                    <div class="form-group">
                        <label>Image (Optional)</label>
                        <input type="file" name="image" class="form-control-file">
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Price (RM)</label>
                                <input type="number" name="price" id="edit-price" class="form-control" placeholder="0">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Discount (%)</label>
                                <input type="number" name="discount" id="edit-discount" class="form-control" placeholder="0">
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Status</label>
                        <select name="status" id="edit-status" class="form-control select2" style="width: 100%;">
                            <option value="active">Active</option>
                            <option value="inactive">Inactive</option>
                        </select>
                    </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 Banner</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 title = $(this).data('title');
            const owner = $(this).data('owner');
            const price = $(this).data('price');
            const discount = $(this).data('discount');
            const status = $(this).data('status');

            $('#edit-form').attr('action', `/admin/banners/${id}`);
            $('#edit-title').val(title);
            $('#edit-owner').val(owner).trigger('change');
            $('#edit-price').val(price);
            $('#edit-discount').val(discount);
            $('#edit-status').val(status).trigger('change');
        });
    });
</script>
@endpush