@extends('admin.layout.app')

@section('title', 'Danh mục')

@section('content')
    <div class="container-fluid {{Auth::check() && Auth::user()->is_layout_two == 1 ? "mt-2 p-0" : ""}}">

        <!-- Page Heading -->
        {{-- <h1 class="h3 mb-2 text-gray-800">Danh mục app</h1> --}}
        <!-- DataTales Example -->
        <div class="card shadow mb-4">
            <div class="card-header py-3 d-flex justify-content-between align-items-center">
                <h6 class="m-0 font-weight-bold text-primary ">Chỉnh sửa app</h6>
                <a class="btn btn-primary btn-user" href="{{ route('app.index') }}">Quay lại</a>
            </div>

            <div class="card-body">
                <form id="addProductForm" method="POST" action="{{route('app.update', ['id' => $app->id])}}">
                    @csrf
                    <!-- Tên sản phẩm -->
                    <div class="mb-3">
                        <label for="productName" class="form-label required">
                            <i class="bi bi-box me-1"></i>
                            Tên app
                        </label>
                        <input type="text" class="form-control" id="productName" name="app_name" placeholder="Nhập tên app"
                            value="{{$app->app_name}}" required>
                        <div class="invalid-feedback">
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="productName" class="form-label required">
                            <i class="bi bi-box me-1"></i>
                            Ký tự viết tắt
                        </label>
                        <input type="text" class="form-control" id="productName" name="google_ads_name"
                            placeholder="Ký tự viết tắt" value="{{$app->google_ads_name}}" required>
                        <div class="invalid-feedback">
                        </div>
                    </div>
                    <!-- <div class="mb-3">
                                    <label for="productName" class="form-label ">
                                        <i class="bi bi-box me-1"></i>
                                        Thông báo
                                    </label>
                                    <input type="text" class="form-control" id="productName" name="alert" placeholder="Nhập thông báo"
                                        value="{{$app->alert}}">
                                    <div class="invalid-feedback">
                                        Vui lòng nhập tên sản phẩm.
                                    </div>
                                </div> -->
                    <div class="mb-3">
                        <label for="multiple-select-field" class="form-label required">
                            <i class="bi bi-box me-1"></i>
                            Người phụ trách
                        </label>
                        <select class="form-select" id="multiple-select-field" name="user_app[]"
                            data-placeholder="Chọn người phụ trách" multiple required>
                            @foreach ($users as $user)
                                <option value="{{ $user->id }}" {{ in_array($user->id, $app->users->pluck('id')->toArray()) ? 'selected' : '' }}>{{ $user->name }}</option>
                            @endforeach
                        </select>
                        <div class="invalid-feedback">
                        </div>
                    </div>

                    <!-- Loại thông báo -->
                    <div class="mb-4">
                        <label for="status" class="form-label required">
                            <i class="bi bi-bell me-1"></i>
                            Trạng thái
                        </label>
                        <select class=" form-control" id="status" name="status" required>
                            <option value="">Chọn trạng thái</option>
                            <option value="0" {{$app->status == 0 ? "selected" : ""}}>Live</option>
                            <option value="1" {{$app->status == 1 ? "selected" : ""}}>Unpublish</option>
                            <option value="2" {{$app->status == 2 ? "selected" : ""}}>Remove</option>
                            <option value="3" {{$app->status == 3 ? "selected" : ""}}>Suspended</option>
                        </select>
                    </div>

                    <!-- Buttons -->
                    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-plus-lg me-1"></i>
                            Lưu
                        </button>
                    </div>
                </form>
            </div>
        </div>

    </div>
@endsection
@push('styles')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@endpush
@push('scripts')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
@endpush
@push('scripts')
    <script>
        $(document).ready(function () {
            $('#multiple-select-field').select2({
                width: '100%',
                placeholder: $(this).data('placeholder'),
                closeOnSelect: false,
            });
        });
    </script>
@endpush