@extends('layouts.template.main')

@push('styles')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <style>
        .select2-container .select2-selection--multiple {
            min-height: 38px;
            border-color: #ced4da;
            border-radius: 6px;
        }

        .select2-container--default .select2-selection--multiple .select2-selection__choice {
            background-color: #0d6efd;
            border: none;
            color: #fff;
            border-radius: 20px;
            padding: 2px 10px;
            font-size: 12px;
        }

        .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
            color: rgba(255, 255, 255, 0.8);
            margin-right: 5px;
        }

        .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
            color: #fff;
        }

        .select2-container--default .select2-selection--single {
            height: 38px;
            border-color: #ced4da;
            border-radius: 6px;
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 36px;
            padding-left: 12px;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 36px;
        }

        .select2-container {
            width: 100% !important;
        }
    </style>
@endpush

@section('content')
    <main>
        <header class="page-header page-header-compact page-header-light border-bottom bg-white mb-4">
            <div class="container-xl px-4">
                <div class="page-header-content">
                    <div class="row align-items-center justify-content-between pt-3">
                        <div class="col-auto mb-3">
                            <h1 class="page-header-title">
                                <div class="page-header-icon"><i data-feather="plus-circle"></i></div>
                                Tạo app ios mới
                            </h1>
                        </div>
                        <div class="col-auto mb-3">
                            <a href="{{ route('app_ios') }}" class="btn btn-sm btn-outline-secondary">
                                <i class="fa-solid fa-arrow-left me-1"></i> Quay lại danh sách
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <div class="container-xl px-4 mt-4">
            @if (session('success'))
                <div class="alert alert-success alert-dismissible fade show mb-4" role="alert">
                    <i class="fa-solid fa-circle-check me-2"></i>{{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

            @if (session('error'))
                <div class="alert alert-danger alert-dismissible fade show mb-4" role="alert">
                    <i class="fa-solid fa-circle-exclamation me-2"></i>{{ session('error') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

            @if ($errors->any())
                <div class="alert alert-danger alert-dismissible fade show mb-4" role="alert">
                    <ul class="mb-0">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

            <form method="POST" action="{{ route('app_ios_store') }}">
                @csrf
                <div class="row g-4">

                    {{-- ===================== CỘT TRÁI ===================== --}}
                    <div class="col-xl-8">

                        {{-- Card: Thông tin cơ bản --}}
                        <div class="card mb-4">
                            <div class="card-header fw-semibold">
                                <i class="fa-solid fa-cube me-2 text-primary"></i>Thông tin app
                            </div>
                            <div class="card-body">
                                <div class="row g-3">
                                    <div class="col-md-3">
                                        <label class="form-label fw-semibold small">ST <span class="text-muted">(Số thứ
                                                tự)</span></label>
                                        <input type="text" class="form-control @error('st_app') is-invalid @enderror"
                                            name="st_app" value="{{ old('st_app') }}" placeholder="VD: ST001" required />
                                        @error('st_app')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-9">
                                        <label class="form-label fw-semibold small">Tên App <span
                                                class="text-danger">*</span></label>
                                        <input type="text" class="form-control @error('app_name') is-invalid @enderror"
                                            name="app_name" value="{{ old('app_name') }}" placeholder="VD: My Super App"
                                            required />
                                        @error('app_name')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-12">
                                        <label class="form-label fw-semibold small">Package Name</label>
                                        <input type="text" class="form-control @error('package') is-invalid @enderror"
                                            name="package" value="{{ old('package') }}" placeholder="VD: com.lvt.myapp"
                                            required />
                                        @error('package')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label fw-semibold small">Trạng thái</label>
                                        <select class="form-select" name="status_id">
                                            <option value="">-- Chọn Status --</option>
                                            @foreach ($statuses as $status)
                                                <option value="{{ $status->id }}"
                                                    {{ old('status_id') == $status->id ? 'selected' : '' }}>
                                                    {{ $status->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label fw-semibold small">Store</label>
                                        <select class="form-select" name="store_id">
                                            <option value="">-- Chọn Store --</option>
                                            @foreach ($stores as $store)
                                                <option value="{{ $store->id }}"
                                                    {{ old('store_id') == $store->id ? 'selected' : '' }}>
                                                    {{ $store->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label fw-semibold small">Admob</label>
                                        <select class="form-select" name="admob_id">
                                            <option value="">-- Chọn Admob --</option>
                                            @foreach ($admobs as $admob)
                                                <option value="{{ $admob->id }}"
                                                    {{ old('admob_id') == $admob->id ? 'selected' : '' }}>
                                                    {{ $admob->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-check form-switch mt-2">
                                            <input class="form-check-input" type="checkbox" name="has_test_case"
                                                id="hasTestCase" {{ old('has_test_case') ? 'checked' : '' }}>
                                            <label class="form-check-label" for="hasTestCase">Có Test Case</label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-check form-switch mt-2">
                                            <input class="form-check-input" type="checkbox" name="check_update"
                                                id="checkUpdate" {{ old('check_update') ? 'checked' : '' }}>
                                            <label class="form-check-label" for="checkUpdate">Đã check app</label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-check form-switch mt-2">
                                            <input class="form-check-input" type="checkbox" name="has_ads_script"
                                                id="hasAdsScript" value="1"
                                                {{ old('has_ads_script') ? 'checked' : '' }}>
                                            <label class="form-check-label" for="hasAdsScript">Có Ads Script</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Card: Links --}}
                        <div class="card mb-4">
                            <div class="card-header fw-semibold">
                                <i class="fa-solid fa-link me-2 text-info"></i>Các đường dẫn
                            </div>
                            <div class="card-body">
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <label class="form-label fw-semibold small">
                                            <i class="fa-brands fa-figma me-1 text-purple"></i>Design Link (Figma)
                                        </label>
                                        <input type="url" class="form-control" name="design_link"
                                            value="{{ old('design_link') }}" placeholder="https://figma.com/..." />
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label fw-semibold small">
                                            <i class="fa-solid fa-folder-open me-1 text-warning"></i>Folder Link (Drive)
                                        </label>
                                        <input type="url" class="form-control" name="folder_link"
                                            value="{{ old('folder_link') }}"
                                            placeholder="https://drive.google.com/..." />
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label fw-semibold small">
                                            <i class="fa-brands fa-git-alt me-1 text-danger"></i>Git Link
                                        </label>
                                        <input type="url" class="form-control" name="git_link"
                                            value="{{ old('git_link') }}" placeholder="https://github.com/..." />
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label fw-semibold small">
                                            <i class="fa-brands fa-store me-1 text-info"></i>Store link
                                        </label>
                                        <input type="url" class="form-control" name="store_link"
                                            value="{{ old('store_link') }}" placeholder="https://store.com/..." />
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Card: Ghi chú --}}
                        <div class="card mb-4">
                            <div class="card-header fw-semibold">
                                <i class="fa-solid fa-note-sticky me-2 text-secondary"></i>Ghi chú
                            </div>
                            <div class="card-body">
                                <textarea class="form-control" name="note" rows="4" placeholder="Ghi chú thêm về app...">{{ old('note') }}</textarea>
                            </div>
                        </div>

                    </div>

                    {{-- ===================== CỘT PHẢI ===================== --}}
                    <div class="col-xl-4">

                        {{-- Card: Phân công nhân sự --}}
                        <div class="card mb-4">
                            <div class="card-header fw-semibold">
                                <i class="fa-solid fa-users me-2 text-success"></i>Phân công nhân sự
                            </div>
                            <div class="card-body">

                                <div class="mb-3">
                                    <label class="form-label fw-semibold small">Designer</label>
                                    <select name="designer_ids[]" multiple id="sel_designer">
                                        @foreach ($designers as $u)
                                            <option value="{{ $u->id }}"
                                                {{ in_array($u->id, old('designer_ids', [])) ? 'selected' : '' }}>
                                                {{ $u->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label fw-semibold small">Developer</label>
                                    <select name="developer_ids[]" multiple id="sel_developer">
                                        @foreach ($developers as $u)
                                            <option value="{{ $u->id }}"
                                                {{ in_array($u->id, old('developer_ids', [])) ? 'selected' : '' }}>
                                                {{ $u->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label fw-semibold small">Tester</label>
                                    <select name="tester_ids[]" multiple id="sel_tester">
                                        @foreach ($testers as $u)
                                            <option value="{{ $u->id }}"
                                                {{ in_array($u->id, old('tester_ids', [])) ? 'selected' : '' }}>
                                                {{ $u->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label fw-semibold small">MKT phụ trách</label>
                                    <select name="mkt_user_id" id="sel_mkt">
                                        <option value="">-- Chọn MKT --</option>
                                        @foreach ($mktUsers as $u)
                                            <option value="{{ $u->id }}"
                                                {{ old('mkt_user_id') == $u->id ? 'selected' : '' }}>
                                                {{ $u->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="mb-0">
                                    <label class="form-label fw-semibold small">Data phụ trách</label>
                                    <select name="data_user_id" id="sel_data">
                                        <option value="">-- Chọn Data --</option>
                                        @foreach ($dataUsers as $u)
                                            <option value="{{ $u->id }}"
                                                {{ old('data_user_id') == $u->id ? 'selected' : '' }}>
                                                {{ $u->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                            </div>
                        </div>

                        {{-- Nút lưu --}}
                        <div class="card">
                            <div class="card-body">
                                <div class="d-grid gap-2">
                                    <button type="submit" class="btn btn-primary btn-lg">
                                        <i class="fa-solid fa-floppy-disk me-2"></i>Lưu App
                                    </button>
                                    <a href="{{ route('app_follow') }}" class="btn btn-outline-secondary">
                                        Hủy
                                    </a>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </form>
        </div>
    </main>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(document).ready(function() {
            var s2opts = {
                width: '100%',
                language: {
                    noResults: function() {
                        return 'Không tìm thấy';
                    },
                    searching: function() {
                        return 'Tìm...';
                    }
                }
            };

            $('#sel_designer').select2($.extend({}, s2opts, {
                placeholder: 'Chọn Designer...',
                allowClear: true
            }));
            $('#sel_developer').select2($.extend({}, s2opts, {
                placeholder: 'Chọn Developer...',
                allowClear: true
            }));
            $('#sel_tester').select2($.extend({}, s2opts, {
                placeholder: 'Chọn Tester...',
                allowClear: true
            }));
            $('#sel_mkt').select2($.extend({}, s2opts, {
                placeholder: '-- Chọn MKT --',
                allowClear: true
            }));
            $('#sel_data').select2($.extend({}, s2opts, {
                placeholder: '-- Chọn Data --',
                allowClear: true
            }));

            // ====== Auto-fill Store Link từ Package Name ======
            function genStoreLink() {
                var pkg = $('input[name="package"]').val().trim();
                if (!pkg) {
                    alert('Vui lòng nhập Package Name trước.');
                    $('input[name="package"]').focus();
                    return;
                }
                var url = 'https://play.google.com/store/apps/details?id=' + pkg;
                $('#storeLink').val(url);
            }



        });
    </script>
@endpush