@extends('layouts.app')


@php
    $mainClass = 'lg:w-[80%] w-full flex flex-col bg-[#f7f7f7]'
@endphp

@section('title', 'ساخت بک لینک | نیکس فایل')

@section('aside-content')
    <aside class=" w-full lg:w-[20%] flex flex-col mb-4">
        <div class="bg-primary-color text-white text-left py-8">
            @include('components.header')
        </div>
        @include('components.admin-panel-sidebar')
    </aside>
@endsection

@section('content')
    <div class="container mx-auto w-[80%] flex justify-center items-center mb-12 grow">


        <div class="shadow-lg bg-white rounded-2xl mt-12 p-8 w-full max-w-md flex flex-col items-center gap-2">
            <h2 class="text-2xl font-semibold text-primary-color mb-4">فرم اضافه کردن بک لینک</h2>

            <form action="{{ route('backlink.store') }}" method="POST" enctype="multipart/form-data"
                  class="w-full flex flex-col gap-4">
                @csrf

                <div class="flex flex-col gap-2">
                    <label for="text" class="text-gray-700 font-medium">کلمه بک لینک</label>
                    <input
                            type="text"
                            name="text"
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#eb4334] transition duration-200"
                            placeholder="لینک بک لینک را وارد کنید"
                    >
                </div>
                <div class="flex flex-col gap-2">
                    <label for="redirect_link" class="text-gray-700 font-medium">آدرس بک لینک</label>
                    <input
                            type="text"
                            name="link"
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#eb4334] transition duration-200"
                            placeholder="لینک بک لینک را وارد کنید"
                    >
                </div>

                <div class="flex justify-center gap-2 mt-2">
                    <button
                            type="submit"
                            class="hover:bg-primary-color text-primary-color bg-white border border-primary-color hover:text-white py-2 rounded-lg font-semibold transition duration-200 px-4 w-full"
                    >
                        اضافه کردن بک لینک
                    </button>
                    <a
                            href="{{ route('backlink.index') }}"
                            class="bg-secondary-color text-white py-2 rounded-lg font-semibold hover:bg-red-600 transition duration-200 text-center px-4 w-full"
                    >
                        بازگشت
                    </a>
                </div>
                @error('link')
                <p class="text-red-500 bg-red-100  rounded-md text-sm mt-1 p-4">{{ $message }}</p>
                @enderror
                @error('text')
                <p class="text-red-500 bg-red-100 rounded-md text-sm mt-1 p-4">{{ $message }}</p>
                @enderror
            </form>
        </div>

    </div>
@endsection