@extends('admin.layouts.app')

@section('title', 'নতুন প্রজেক্ট তৈরি')

@section('panel')

@php
    $pageTitle = 'নতুন প্রজেক্ট তৈরি';
@endphp

@push('breadcrumb-plugins')
    <a href="{{ route('admin.projects.index') }}" class="btn btn-outline--primary btn-sm">
        <i class="las la-arrow-left"></i>
        সব প্রজেক্ট
    </a>
@endpush

<div class="row justify-content-center">
    <div class="col-lg-8 col-xl-7">
        <div class="card">

            <div class="card-header d-flex flex-wrap justify-content-between align-items-center gap-2">
                <h5 class="mb-0">
                    <i class="las la-plus-circle"></i>
                    নতুন আর্নিং প্রজেক্ট যোগ করুন
                </h5>

                <a href="{{ route('admin.projects.index') }}"
                   class="btn btn-outline--primary btn-sm project-back-button">
                    <i class="las la-arrow-left"></i>
                    ফিরে যান
                </a>
            </div>

            <form
                action="{{ route('admin.projects.store') }}"
                method="POST"
                enctype="multipart/form-data"
            >
                @csrf

                <div class="card-body">

                    {{-- Validation Errors --}}
                    @if($errors->any())
                        <div class="alert alert--danger mb-4">
                            <div class="fw-bold mb-2">
                                <i class="las la-exclamation-circle"></i>
                                নিচের তথ্যগুলো সঠিকভাবে পূরণ করুন:
                            </div>

                            <ul class="mb-0 ps-3">
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <div class="list-group project-form-list">

                        {{-- Project Information --}}
                        <div class="list-group-item project-form-item">
                            <div class="project-section-title">
                                প্রজেক্টের সাধারণ তথ্য
                            </div>

                            <div class="project-section-subtitle">
                                প্রজেক্টের নাম, আইকন এবং সিরিয়াল নির্ধারণ করুন।
                            </div>

                            <div class="row g-3 mt-1">

                                <div class="col-md-12">
                                    <label for="title" class="form-label fw-bold">
                                        প্রজেক্ট টাইটেল (Title)
                                        <span class="text--danger">*</span>
                                    </label>

                                    <input
                                        type="text"
                                        id="title"
                                        name="title"
                                        class="form-control @error('title') is-invalid @enderror"
                                        value="{{ old('title') }}"
                                        placeholder="যেমন: TYPING JOB"
                                        maxlength="255"
                                        required
                                    >

                                    @error('title')
                                        <small class="text--danger fw-bold d-block mt-1">
                                            {{ $message }}
                                        </small>
                                    @enderror
                                </div>

                                <div class="col-md-12">
                                    <label for="icon" class="form-label fw-bold">
                                        আইকন ইমেজ (Icon Image)
                                        <span class="text--danger">*</span>
                                    </label>

                                    <input
                                        type="file"
                                        id="icon"
                                        name="icon"
                                        class="form-control @error('icon') is-invalid @enderror"
                                        accept=".jpg,.jpeg,.png,.webp,image/jpeg,image/png,image/webp"
                                        onchange="previewProjectIcon(event)"
                                        required
                                    >

                                    <small class="text-muted d-block mt-1">
                                        স্কয়ার সাইজের PNG, JPG, JPEG অথবা WEBP ইমেজ ব্যবহার করুন।
                                    </small>

                                    @error('icon')
                                        <small class="text--danger fw-bold d-block mt-1">
                                            {{ $message }}
                                        </small>
                                    @enderror

                                    <div
                                        id="iconPreviewWrapper"
                                        class="project-icon-preview-wrapper mt-3 d-none"
                                    >
                                        <div class="fw-bold mb-2">
                                            আইকন প্রিভিউ
                                        </div>

                                        <img
                                            id="iconPreview"
                                            src=""
                                            alt="Project icon preview"
                                            class="project-icon-preview"
                                        >
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <label for="serial" class="form-label fw-bold">
                                        প্রজেক্ট সিরিয়াল (Serial Number)
                                        <span class="text--danger">*</span>
                                    </label>

                                    <input
                                        type="number"
                                        id="serial"
                                        name="serial"
                                        class="form-control @error('serial') is-invalid @enderror"
                                        value="{{ old('serial', 0) }}"
                                        placeholder="যেমন: 1, 2, 3"
                                        min="0"
                                        step="1"
                                        required
                                    >

                                    <small class="text-muted d-block mt-1">
                                        এই ক্যাটাগরির ভেতরে ছোট সিরিয়ালের প্রজেক্ট আগে প্রদর্শিত হবে।
                                    </small>

                                    @error('serial')
                                        <small class="text--danger fw-bold d-block mt-1">
                                            {{ $message }}
                                        </small>
                                    @enderror
                                </div>

                            </div>
                        </div>

                        {{-- Category Settings --}}
                        <div class="list-group-item project-form-item">
                            <div class="project-section-title">
                                ক্যাটাগরি সেটিংস
                            </div>

                            <div class="project-section-subtitle">
                                প্রজেক্টটি কোন সেকশনের অন্তর্ভুক্ত হবে এবং কোন সেকশন আগে আসবে তা নির্ধারণ করুন।
                            </div>

                            <div class="row g-3 mt-1">

                                <div class="col-md-12">
                                    <label for="category" class="form-label fw-bold">
                                        ক্যাটাগরি নাম (Category Name)
                                        <span class="text--danger">*</span>
                                    </label>

                                    <input
                                        type="text"
                                        id="category"
                                        name="category"
                                        list="categorySuggestions"
                                        class="form-control @error('category') is-invalid @enderror"
                                        value="{{ old('category', 'Work & Services') }}"
                                        placeholder="যেমন: Work & Services, Rewards & Perks, Target Bonus"
                                        maxlength="255"
                                        required
                                    >

                                    <datalist id="categorySuggestions">
                                        <option value="Work & Services">
                                        <option value="Rewards & Perks">
                                        <option value="Target Bonus">
                                        <option value="Social & Community">
                                        <option value="Executive Team">
                                    </datalist>

                                    <small class="text-muted d-block mt-1">
                                        ড্রপডাউন সাজেশন থেকে সিলেক্ট করুন অথবা নতুন ক্যাটাগরির নাম লিখুন। একই নামের প্রজেক্টগুলো একটি সেকশনে দেখাবে।
                                    </small>

                                    @error('category')
                                        <small class="text--danger fw-bold d-block mt-1">
                                            {{ $message }}
                                        </small>
                                    @enderror
                                </div>

                                <div class="col-md-12">
                                    <label for="category_serial" class="form-label fw-bold">
                                        ক্যাটাগরি সিরিয়াল (Category Serial)
                                        <span class="text--danger">*</span>
                                    </label>

                                    <input
                                        type="number"
                                        id="category_serial"
                                        name="category_serial"
                                        class="form-control @error('category_serial') is-invalid @enderror"
                                        value="{{ old('category_serial', 1) }}"
                                        placeholder="যেমন: 1, 2, 3"
                                        min="1"
                                        step="1"
                                        required
                                    >

                                    <small class="text-muted d-block mt-1">
                                        কোন ক্যাটাগরি সেকশনটি পেজে আগে প্রদর্শিত হবে (১ = সবার উপরে)।
                                    </small>

                                    @error('category_serial')
                                        <small class="text--danger fw-bold d-block mt-1">
                                            {{ $message }}
                                        </small>
                                    @enderror
                                </div>

                            </div>
                        </div>

                        {{-- Accessibility --}}
                        <div class="list-group-item project-form-item">
                            <div class="project-section-title">
                                প্রজেক্ট অ্যাক্সেস
                            </div>

                            <div class="project-section-subtitle">
                                কোন ধরনের ব্যবহারকারী প্রজেক্টটি দেখতে পারবে তা নির্ধারণ করুন।
                            </div>

                            <div class="row g-3 mt-1">
                                <div class="col-md-12">

                                    <label for="accessibility" class="form-label fw-bold">
                                        কারা দেখতে পাবে? (Accessibility)
                                        <span class="text--danger">*</span>
                                    </label>

                                    <select
                                        id="accessibility"
                                        name="accessibility"
                                        class="form-control @error('accessibility') is-invalid @enderror"
                                        required
                                    >
                                        <option
                                            value="all"
                                            {{ old('accessibility', 'all') === 'all' ? 'selected' : '' }}
                                        >
                                            সবার জন্য উন্মুক্ত
                                        </option>

                                        <option
                                            value="active_1"
                                            {{ old('accessibility') === 'active_1' ? 'selected' : '' }}
                                        >
                                            শুধুমাত্র অ্যাক্টিভ ইউজার (Status 1)
                                        </option>

                                        <option
                                            value="active_0"
                                            {{ old('accessibility') === 'active_0' ? 'selected' : '' }}
                                        >
                                            শুধুমাত্র ইনঅ্যাক্টিভ ইউজার (Status 0)
                                        </option>
                                    </select>

                                    @error('accessibility')
                                        <small class="text--danger fw-bold d-block mt-1">
                                            {{ $message }}
                                        </small>
                                    @enderror

                                </div>
                            </div>
                        </div>

                        {{-- Custom URL --}}
                        <div class="list-group-item project-form-item">
                            <div class="project-section-title">
                                প্রজেক্ট ইউআরএল
                            </div>

                            <div class="project-section-subtitle">
                                ব্যবহারকারী ক্লিক করলে যে ঠিকানায় যাবে সেটি লিখুন।
                            </div>

                            <div class="row g-3 mt-1">
                                <div class="col-md-12">

                                    <label for="custom_url" class="form-label fw-bold">
                                        কাস্টম ইউআরএল লিংক (Custom URL)
                                        <span class="text--danger">*</span>
                                    </label>

                                    <div class="input-group">
                                        <span class="input-group-text project-domain-prefix">
                                            proearn.shop
                                        </span>

                                        <input
                                            type="text"
                                            id="custom_url"
                                            name="custom_url"
                                            class="form-control @error('custom_url') is-invalid @enderror"
                                            value="{{ old('custom_url') }}"
                                            placeholder="/typing-job"
                                            maxlength="255"
                                            autocomplete="off"
                                            oninput="normalizeCustomUrl(this)"
                                            required
                                        >
                                    </div>

                                    <small class="text-muted d-block mt-1">
                                        ডোমেইন বাদ দিয়ে শুধু স্ল্যাশসহ পরবর্তী অংশ লিখুন।
                                        যেমন:
                                        <code>/typing-job</code>
                                        অথবা
                                        <code>/regular-packs</code>
                                    </small>

                                    @error('custom_url')
                                        <small class="text--danger fw-bold d-block mt-1">
                                            {{ $message }}
                                        </small>
                                    @enderror

                                    <div class="custom-url-preview mt-3">
                                        <span class="fw-bold">সম্পূর্ণ লিংক:</span>

                                        <code id="customUrlPreview">
                                            proearn.shop{{ old('custom_url', '/') }}
                                        </code>
                                    </div>

                                </div>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="card-footer">
                    <div class="d-flex flex-wrap justify-content-between align-items-center gap-2">

                        <a
                            href="{{ route('admin.projects.index') }}"
                            class="btn btn-outline--dark"
                        >
                            <i class="las la-arrow-left"></i>
                            ফিরে যান
                        </a>

                        <button
                            type="submit"
                            class="btn btn--success"
                        >
                            <i class="las la-save"></i>
                            প্রজেক্ট সেভ করুন
                        </button>

                    </div>
                </div>

            </form>
        </div>
    </div>
</div>

@endsection

@push('style')
<style>
    .project-form-list {
        overflow: hidden;
        border-radius: 12px;
    }

    .project-form-item {
        padding: 18px;
        border-color: rgba(0, 0, 0, 0.06);
    }

    .project-form-item:hover {
        background-color: #fafafa;
    }

    .project-section-title {
        font-size: 16px;
        font-weight: 900;
    }

    .project-section-subtitle {
        margin-top: 3px;
        color: #6c757d;
        font-size: 12px;
        font-weight: 700;
    }

    .project-domain-prefix {
        font-weight: 700;
        white-space: nowrap;
    }

    .project-icon-preview-wrapper {
        padding: 12px;
        border: 1px dashed rgba(0, 0, 0, 0.15);
        border-radius: 8px;
        background-color: #fafafa;
    }

    .project-icon-preview {
        width: 90px;
        height: 90px;
        padding: 5px;
        object-fit: contain;
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 10px;
        background-color: #ffffff;
    }

    .custom-url-preview {
        padding: 10px 12px;
        overflow-wrap: anywhere;
        border: 1px dashed rgba(0, 0, 0, 0.12);
        border-radius: 7px;
        background-color: #fafafa;
    }

    .custom-url-preview code {
        color: #6f42c1;
        font-weight: 700;
    }

    @media (min-width: 768px) {
        .project-back-button {
            display: none;
        }
    }

    @media (max-width: 575px) {
        .project-domain-prefix {
            width: 100%;
            border-radius: 5px 5px 0 0 !important;
        }

        .project-domain-prefix + .form-control {
            width: 100%;
            border-radius: 0 0 5px 5px !important;
        }

        .card-footer .btn {
            width: 100%;
        }
    }
</style>
@endpush

@push('script')
<script>
    function previewProjectIcon(event) {
        const input = event.target;
        const preview = document.getElementById('iconPreview');
        const wrapper = document.getElementById('iconPreviewWrapper');

        if (!input.files || !input.files[0]) {
            preview.src = '';
            wrapper.classList.add('d-none');
            return;
        }

        const selectedFile = input.files[0];
        const allowedTypes = [
            'image/jpeg',
            'image/png',
            'image/webp'
        ];

        if (!allowedTypes.includes(selectedFile.type)) {
            input.value = '';
            preview.src = '';
            wrapper.classList.add('d-none');

            alert('শুধুমাত্র JPG, JPEG, PNG অথবা WEBP ইমেজ নির্বাচন করুন।');
            return;
        }

        const reader = new FileReader();

        reader.onload = function (fileEvent) {
            preview.src = fileEvent.target.result;
            wrapper.classList.remove('d-none');
        };

        reader.readAsDataURL(selectedFile);
    }

    function normalizeCustomUrl(input) {
        let value = input.value.trim();

        value = value.replace(/^https?:\/\/[^/]+/i, '');
        value = value.replace(/\s+/g, '-');
        value = value.replace(/\/{2,}/g, '/');

        if (value !== '' && !value.startsWith('/')) {
            value = '/' + value;
        }

        input.value = value;
        updateCustomUrlPreview();
    }

    function updateCustomUrlPreview() {
        const input = document.getElementById('custom_url');
        const preview = document.getElementById('customUrlPreview');

        if (!input || !preview) {
            return;
        }

        let path = input.value.trim();

        if (path === '') {
            path = '/';
        }

        preview.textContent = 'proearn.shop' + path;
    }

    document.addEventListener('DOMContentLoaded', function () {
        updateCustomUrlPreview();
    });
</script>
@endpush