@extends('layouts.user')

@section('title')
   Send Product
@endsection

@section('content')

<!-- Start Hero -->
<section class="relative lg:pb-24 pb-16 md:mt-[84px] mt-[70px]">
    <div class="relative md:container container-fluid">
        <div class="relative overflow-hidden md:rounded-md shadow dark:shadow-gray-700 h-52 bg-[url('../../assets/images/hero/pages.html')] bg-center bg-no-repeat bg-cover" 
        style="background-image: url('{{ asset('images/profile-1.jpg') }}');"></div>
    </div><!--end container-->

    <div class="container relative mt-16 md:mt-24">
        <div class="md:flex">
            <div class="lg:w-1/4 md:w-1/3 md:px-3">
                <div class="relative -mt-32 md:-mt-48">
                    <div class="p-6 bg-white rounded-md shadow dark:shadow-gray-800 dark:bg-slate-900">
                        <div class="mb-5 text-center profile-pic">
                            <!-- <input id="pro-img" name="profile-image" type="file" class="hidden" onchange="loadFile(event)" /> -->
                            <div>
                                <div class="relative mx-auto h-28 w-28">
                                    <img src="{{ asset('images/avatar-1.png') }}" class="rounded-full shadow dark:shadow-gray-800 ring-4 ring-slate-50 dark:ring-slate-800" id="profile-image" alt="">
                                    <label class="absolute inset-0 cursor-pointer" for="pro-img"></label>
                                </div>

                                <div class="mt-4">
                                    <h5 class="text-lg font-semibold">{{ auth()->user()->username }}</h5>
                                    <p class="text-slate-400">{{ auth()->user()->email }}</p>
                                </div>
                            </div>
                        </div>

                        <!-- Side Nav -->
                        <x-side-nav/>
                        
                    </div>
                </div>
            </div>
            
            <div class="mt-6 lg:w-3/4 md:w-2/3 md:px-3 md:mt-0">
                <x-alert/>

                <div class="p-6 mt-6 bg-white rounded-md shadow dark:shadow-gray-800 dark:bg-slate-900">
                    <div class="grid grid-cols-1 gap-5 lg:grid-cols-2">
                        <div> 
                            <h5 class="mb-4 text-lg font-semibold">Add Products Through An Agent :</h5>
                            <form method="post" action="{{ route('agent-send') }}">
                                @csrf
                                <div class="grid grid-cols-1 gap-5">
                                    <div>
                                        <label class="font-medium form-label">Store Name :</label>
                                        <div class="relative mt-2 form-icon">
                                            <!-- <i data-feather="key" class="absolute w-4 h-4 top-3 start-4"></i> -->
                                            <input type="text" name="store" class="w-full h-10 px-3 py-2 bg-transparent border border-gray-100 rounded outline-none ps-12 dark:bg-slate-900 dark:text-slate-200 dark:border-gray-800 focus:ring-0" placeholder="Enter your store name" required>
                                        </div>
                                    </div>

                                    {{-- <div>
                                        <label class="font-medium form-label">Email :</label>
                                        <div class="relative mt-2 form-icon">
                                            @
                                            <input type="email" name="email" class="w-full h-10 px-3 py-2 bg-transparent border border-gray-100 rounded outline-none ps-12 dark:bg-slate-900 dark:text-slate-200 dark:border-gray-800 focus:ring-0" placeholder="Enter an email you can be easily reachable with" required>
                                        </div>
                                    </div> --}}

                                    <div>
                                        <label class="font-medium form-label">How do you want to be contacted? :</label>
                                        <small class="">If through whatsapp, enter your whatsapp number, else if through mail, enter your preferred email address.</small>
                                        <div class="relative mt-2 form-icon">
                                            <!-- <i data-feather="key" class="absolute w-4 h-4 top-3 start-4"></i> -->
                                            <input type="text" name="medium" class="w-full h-10 px-3 py-2 bg-transparent border border-gray-100 rounded outline-none ps-12 dark:bg-slate-900 dark:text-slate-200 dark:border-gray-800 focus:ring-0" placeholder="Enter your preferred contact medium" required>
                                        </div>
                                    </div>

                                    <div>
                                        <label class="font-medium form-label">Enter details of products you'd like to send:</label>
                                        <div class="relative mt-2 form-icon">
                                            <!-- <i data-feather="map-pin" class="absolute w-4 h-4 top-3 start-4"></i> -->
                                            <textarea name="details" class="w-full px-3 py-2 bg-transparent border border-gray-100 rounded outline-none ps-12 dark:bg-slate-900 dark:text-slate-200 dark:border-gray-800 focus:ring-0" placeholder="Enter any additional information you'd like us to know" required></textarea>
                                        </div>
                                    </div>
                                </div><!--end grid-->

                                <button class="inline-block px-5 py-2 mt-5 text-base font-semibold tracking-wide text-center text-white align-middle duration-500 bg-orange-500 rounded-md">Submit</button>
                            </form>
                        </div><!--end col-->

                    </div><!--end row-->
                </div>
            </div>
        </div><!--end grid-->
    </div><!--end container-->
</section><!--end section-->
<!-- End Hero -->

@endsection