@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-edit"></i>
                    প্রজেক্ট আপডেট করুন: {{ $project->title }}
                </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.update', $project->id) }}"
                method="POST"
                enctype="multipart/form-data"
            >
                @csrf
                @method('PUT')

                <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

                    {{-- Success Message --}}
                    @if(session('success'))
                        <div class="alert alert--success mb-4">
                            <i class="las la-check-circle"></i>
                            {{ session('success') }}
                        </div>
                    @endif

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

                        {{-- General 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">

                                {{-- Project Title --}}
                                <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', $project->title) }}"
                                        placeholder="যেমন: TYPING JOB"
                                        maxlength="255"
                                        required
                                    >

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

                                {{-- Project Icon --}}
                                <div class="col-md-12">
                                    <label for="icon" class="form-label fw-bold">
                                        আইকন ইমেজ
                                    </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)"
                                    >

                                    <small class="text-muted d-block mt-1">
                                        আইকন পরিবর্তন করতে চাইলে নতুন ইমেজ নির্বাচন করুন।
                                        নতুন ইমেজ নির্বাচন না করলে বর্তমান আইকন অপরিবর্তিত থাকবে।
                                    </small>

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

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

                                        {{-- Current Icon --}}
                                        <div class="col-sm-6">
                                            <div class="project-icon-box">
                                                <div class="fw-bold mb-2">
                                                    বর্তমান আইকন
                                                </div>

                                                @if(!empty($project->icon))
                                                    <img
                                                        src="{{ asset($project->icon) }}"
                                                        alt="{{ $project->title }} current icon"
                                                        class="project-icon-preview"
                                                    >
                                                @else
                                                    <div class="project-icon-empty">
                                                        <i class="las la-image"></i>
                                                        <span>বর্তমান আইকন নেই</span>
                                                    </div>
                                                @endif
                                            </div>
                                        </div>

                                        {{-- New Icon Preview --}}
                                        <div
                                            id="newIconPreviewColumn"
                                            class="col-sm-6 d-none"
                                        >
                                            <div class="project-icon-box">
                                                <div class="fw-bold mb-2">
                                                    নতুন আইকন প্রিভিউ
                                                </div>

                                                <img
                                                    id="newIconPreview"
                                                    src=""
                                                    alt="New project icon preview"
                                                    class="project-icon-preview"
                                                >

                                                <button
                                                    type="button"
                                                    class="btn btn-outline--danger btn-sm mt-2"
                                                    onclick="removeSelectedIcon()"
                                                >
                                                    <i class="las la-times"></i>
                                                    নির্বাচন বাতিল করুন
                                                </button>
                                            </div>
                                        </div>

                                    </div>
                                </div>

                                {{-- Serial --}}
                                <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', $project->serial) }}"
                                        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', $project->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', $project->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', $project->accessibility) === 'all' ? 'selected' : '' }}
                                        >
                                            সবার জন্য উন্মুক্ত
                                        </option>

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

                                        <option
                                            value="active_0"
                                            {{ old('accessibility', $project->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', $project->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', $project->custom_url ?: '/') }}
                                        </code>
                                    </div>

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

                        {{-- Project Status --}}
                        <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="status" class="form-label fw-bold">
                                        প্রজেক্ট স্ট্যাটাস (Status)
                                        <span class="text--danger">*</span>
                                    </label>

                                    <select
                                        id="status"
                                        name="status"
                                        class="form-control @error('status') is-invalid @enderror"
                                        onchange="updateStatusPreview()"
                                        required
                                    >
                                        <option
                                            value="1"
                                            {{ (string) old('status', $project->status) === '1' ? 'selected' : '' }}
                                        >
                                            Active — ইউজার প্যানেলে দেখাবে
                                        </option>

                                        <option
                                            value="0"
                                            {{ (string) old('status', $project->status) === '0' ? 'selected' : '' }}
                                        >
                                            Inactive — ইউজার প্যানেল থেকে হাইড থাকবে
                                        </option>
                                    </select>

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

                                    <div id="statusPreview" class="status-preview mt-3"></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--warning"
                        >
                            <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-box {
        height: 100%;
        padding: 14px;
        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;
    }

    .project-icon-empty {
        display: flex;
        width: 110px;
        min-height: 90px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        color: #8a8a8a;
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 10px;
        background-color: #ffffff;
        text-align: center;
    }

    .project-icon-empty i {
        font-size: 32px;
    }

    .project-icon-empty span {
        font-size: 11px;
        font-weight: 700;
    }

    .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;
    }

    .status-preview {
        padding: 12px;
        border: 1px dashed rgba(0, 0, 0, 0.12);
        border-radius: 7px;
        background-color: #fafafa;
    }

    @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('newIconPreview');
        const previewColumn = document.getElementById('newIconPreviewColumn');

        if (!input.files || !input.files[0]) {
            preview.src = '';
            previewColumn.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 = '';
            previewColumn.classList.add('d-none');

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

        const reader = new FileReader();

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

        reader.readAsDataURL(selectedFile);
    }

    function removeSelectedIcon() {
        const input = document.getElementById('icon');
        const preview = document.getElementById('newIconPreview');
        const previewColumn = document.getElementById('newIconPreviewColumn');

        input.value = '';
        preview.src = '';
        previewColumn.classList.add('d-none');
    }

    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;
    }

    function updateStatusPreview() {
        const statusSelect = document.getElementById('status');
        const statusPreview = document.getElementById('statusPreview');

        if (!statusSelect || !statusPreview) {
            return;
        }

        if (statusSelect.value === '1') {
            statusPreview.innerHTML =
                '<span class="badge badge--success">' +
                    '<i class="las la-check-circle"></i> Active' +
                '</span>' +
                '<span class="d-block text-muted mt-2">' +
                    'প্রজেক্টটি ইউজার প্যানেলে দেখা যাবে।' +
                '</span>';
        } else {
            statusPreview.innerHTML =
                '<span class="badge badge--danger">' +
                    '<i class="las la-times-circle"></i> Inactive' +
                '</span>' +
                '<span class="d-block text-muted mt-2">' +
                    'প্রজেক্টটি ইউজার প্যানেল থেকে লুকানো থাকবে।' +
                '</span>';
        }
    }

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