@extends('layouts.master')
@section('title', 'Home')

@section('style')
    <style>
        .card:hover {
            transform: translateY(-6px);
            transition: 0.25s ease;
        }
    </style>
@endsection

@section('script')
    <script></script>
@endsection


@section('content')
    @include('layouts.sidebar')

    <main>

        <section class="wrapper" style="background-color: #EDE9FE">
            <div class="container pt-10 pt-md-14 pb-8 text-center">
                <div class="row gx-lg-8 gx-xl-12 gy-10 align-items-center">
                    <div class="col-12 col-lg-7 col-md-6">
                        <figure>
                            <img class="img-fluid" src="{{ asset('/picture/home1.png') }}"
                                srcset="{{ asset('/picture/home1.png') }} 2x" alt="" style="object-fit: cover; width: 100%;">
                        </figure>
                    </div>
                    <div class="col-md-10 offset-md-1 offset-lg-0 col-lg-5 text-center text-lg-start">
                        <h1 class="display-1 mb-5 mx-md-n5 mx-lg-0">Online Catalog Souvenir</h1>
                        <p class="lead fs-lg mb-7">SIIT Online
                            Catalog System.</p>
                        <span><a class="btn btn-purple rounded-pill me-2"
                                href="{{ url('/cataloglist') }}">Request</a></span>
                    </div>
                </div>
            </div>
        </section>

        <section class="wrapper bg-light">
            <div class="container pt-14 pt-md-16">
                <div class="row text-center">
                    <div class="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
                        <h2 class="fs-16 text-uppercase text-muted mb-3">What We Do?</h2>
                        <h3 class="display-4 mb-10 px-xl-10">The service we offer is specifically designed to meet your
                            needs.</h3>
                    </div>
                </div>
                <div class="position-relative">
                    <div class="shape rounded-circle bg-soft-blue rellax w-16 h-16" data-rellax-speed="1"
                        style="bottom: -0.5rem; right: -2.2rem; z-index: 0;"></div>
                    <div class="shape bg-dot primary rellax w-16 h-17" data-rellax-speed="1"
                        style="top: -0.5rem; left: -2.5rem; z-index: 0;"></div>

                    <div class="row gx-md-5 gy-5 text-center">

                        <!-- Request -->
                        <div class="col-md-6 col-xl-3">
                            <div class="card shadow-lg h-100">
                                <div class="card-body">
                                    <i class="uil uil-shopping-cart fs-25 text-dark"></i>
                                    <h4>Request</h4>
                                    <p class="mb-2">
                                        เลือกรายการของที่ระลึก ระบุจำนวน กรอกข้อมูลการเบิก และส่งคำขอผ่านระบบออนไลน์
                                    </p>
                                    <a href="#" class="more hover link-yellow">เริ่มขอเบิก</a>
                                </div>
                            </div>
                        </div>

                        <!-- Review -->
                        <div class="col-md-6 col-xl-3">
                            <div class="card shadow-lg h-100">
                                <div class="card-body">
                                    <i class="uil uil-clipboard-alt fs-25 text-dark"></i>
                                    <h4>Review & Approve</h4>
                                    <p class="mb-2">
                                        ตรวจสอบรายละเอียดคำขอ และดำเนินการอนุมัติรายการของที่ระลึก
                                    </p>
                                    <a href="#" class="more hover link-red">ตรวจสอบ</a>
                                </div>
                            </div>
                        </div>

                        <!-- Delivery -->
                        <div class="col-md-6 col-xl-3">
                            <div class="card shadow-lg h-100">
                                <div class="card-body">
                                    <i class="uil uil-truck fs-25 text-dark"></i>
                                    <h4>Delivery</h4>
                                    <p class="mb-2">
                                        จัดส่งของที่ระลึกไปยังผู้ขอ หรือสามารถเลือกรับด้วยตนเองได้
                                    </p>
                                    <a href="#" class="more hover link-green">ดูสถานะ</a>
                                </div>
                            </div>
                        </div>

                        <!-- Return -->
                        <div class="col-md-6 col-xl-3">
                            <div class="card shadow-lg h-100">
                                <div class="card-body">
                                    <i class="uil uil-refresh fs-25 text-dark"></i>
                                    <h4>Return Tracking</h4>
                                    <p class="mb-2">
                                        ติดตามสถานะการส่งคืนของที่ระลึก และประวัติการใช้งาน
                                    </p>
                                    <a href="#" class="more hover link-blue">ติดตาม</a>
                                </div>
                            </div>
                        </div>

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

        <section class="wrapper bg-gradient-reverse-primary">
            <div class="container py-16 py-md-18">
                <div class="row gx-lg-8 gx-xl-12 gy-10 mb-8 align-items-center">
                    <div class="col-lg-7 order-lg-2">
                        <figure><img class="w-auto" src="./sandbox/img/concept/concept3.png"
                                srcset="./sandbox/img/concept/concept3@2x.png 2x" alt="" /></figure>
                    </div>
                    <div class="col-lg-5">
                        <h2 class="fs-16 text-uppercase text-muted mb-3">Analyze Now</h2>
                        <h3 class="display-4 mb-5">Wonder how much faster your website can go? Easily check your SEO Score
                            now.</h3>
                        <p class="mb-7">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
                            mus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna,
                            vel scelerisque nisl consectetur et.</p>
                        <div class="row">
                            <div class="col-lg-9">
                                <form action="#">
                                    <div class="form-floating input-group">
                                        <input type="url" class="form-control" placeholder="Enter Website URL"
                                            id="seo-check">
                                        <label for="seo-check">Enter Website URL</label>
                                        <button class="btn btn-purple" type="button">Check</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        @include('layouts.footer')
    </main>
@endsection