@extends('admin.layouts.master')
@section('brand-models', 'active')
@section('title') {{ $data['title'] ?? 'Brand Models Management' }} @endsection

@push('style')
    <style>
        table.dataTable.no-footer {
            border-left: 1px solid #e8e8e8 !important;
            border-right: 1px solid #e8e8e8 !important;
        }

        .action-buttons .btn {
            margin: 0 2px;
        }
    </style>
@endpush

@section('content')
    <div class="content-wrapper">
        <div class="content-header">
            <div class="container-fluid d-flex justify-content-between align-items-center">
                <h1 class="m-0">{{ $data['title'] ?? 'Brand Models Management' }}</h1>
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                    <li class="breadcrumb-item active">{{ $data['title'] ?? 'Brand Models' }}</li>
                </ol>
            </div>
        </div>

        <div class="content">
            <div class="container-fluid">
                <div class="card mt-4">
                    <div class="card-header d-flex justify-content-between align-items-center">

                        <div class="row w-100">
                            <div class="col-6 card-title">
                                Brand Model List
                            </div>
                            <div class="col-6 text-right float-right">
                                <button type="button" class="btn btn-primary" data-toggle="modal"
                                    data-target="#createModelModal">
                                    Create New Model
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="card-body table-responsive p-0">
                        <table id="dataTables" class="table table-hover table-bordered jsgrid-table">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Model Name</th>
                                    <th>Brand</th>
                                    <th>Slug</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($models as $model)
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        <td>{{ $model->name }}</td>
                                       <td>
    @if ($model->brand)
        <a href="{{ route('admin.brand-models.index', ['brand_id' => $model->brand_id]) }}">
            {{ $model->brand->name }}
        </a>
    @else
        -
    @endif
</td>

                                        <td>{{ $model->slug }}</td>
                                        <td>
                                            @if($model->is_active)
                                                <span class="badge badge-success">Active</span>
                                            @else
                                                <span class="badge badge-danger">Inactive</span>
                                            @endif
                                        </td>
                                        <td class="action-buttons">
                                            <button type="button" class="btn btn-sm btn-primary" data-toggle="modal"
                                                data-target="#editModelModal" data-id="{{ $model->id }}"
                                                data-name="{{ $model->name }}" data-brand_id="{{ $model->brand_id }}"
                                                data-is_active="{{ $model->is_active }}">
                                                Edit
                                            </button>
                                            <form action="{{ route('admin.brand-models.destroy', $model->id) }}" method="POST"
                                                style="display:inline-block" onsubmit="return confirm('Delete this model?')">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-sm btn-danger">Delete</button>
                                            </form>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Create Model Modal --}}
    <div class="modal fade" id="createModelModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <form action="{{ route('admin.brand-models.store') }}" method="POST">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title">Create Brand Model</h5>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label>Brand</label>
                            <select class="form-control" name="brand_id" required>
                                <option value="">Select Brand</option>
                                @foreach($brands as $brand)
                                    <option value="{{ $brand->id }}">{{ $brand->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Model Name</label>
                            <input type="text" class="form-control" name="name" required>
                        </div>
                        <div class="form-group">
                            <label>Status</label>
                            <select class="form-control" name="is_active">
                                <option value="1">Active</option>
                                <option value="0">Inactive</option>
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button class="btn btn-primary">Create</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Edit Model Modal --}}
    <div class="modal fade" id="editModelModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <form id="editModelForm" method="POST">
                    @csrf
                    @method('PUT')
                    <div class="modal-header">
                        <h5 class="modal-title">Edit Brand Model</h5>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" id="model_id" name="id">
                        <div class="form-group">
                            <label>Brand</label>
                            <select class="form-control" id="edit_brand_id" name="brand_id" required>
                                @foreach($brands as $brand)
                                    <option value="{{ $brand->id }}">{{ $brand->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Model Name</label>
                            <input type="text" id="edit_name" name="name" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label>Status</label>
                            <select id="edit_is_active" name="is_active" class="form-control">
                                <option value="1">Active</option>
                                <option value="0">Inactive</option>
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button class="btn btn-primary">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>
        $('#editModelModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var id = button.data('id');
            var name = button.data('name');
            var brand_id = button.data('brand_id');
            var is_active = button.data('is_active');

            var modal = $(this);
            modal.find('#model_id').val(id);
            modal.find('#edit_name').val(name);
            modal.find('#edit_brand_id').val(brand_id);
            modal.find('#edit_is_active').val(is_active);

            var action = "{{ route('admin.brand-models.update', ':id') }}";
            modal.find('#editModelForm').attr('action', action.replace(':id', id));
        });
    </script>

    
@endpush