@extends('layouts.mmrda')

@section('content')
<style>
    .menu .card {
        min-height: 365px;
        padding: 20px;
        margin-top: -120px;
        align-items: start;
        margin-top: -120px;
        text-align: left;
        box-shadow: 0px 3px 36px #00000029;
    }

    .menu .menu-img {
        margin: 45px 0px;
    }

    .menu .menu-title {
        font-weight: bold;
    }

    .menu .menu-description {
        font-size: 12px;
        margin: 5px 0px 15px 0px;
    }
</style>
<section class="rti_banner_page">
    <img src="{{ asset('assets/images/inner-banner-mmr.png') }}">
    <h2>RnR Application Services:</h2>
</section>

<section class="rnr_services_outer">
    @if (session('status') || session('success'))
        <div class="container justify-content-center">
            <div class="alert alert-success">
                {{ session('status') ?? session('success') }}
            </div>
        </div>
    @endif
    @if (session('error'))
        <div class="container justify-content-center">
            <div class="alert alert-danger">
                {{ session('error') }}
            </div>
        </div>
    @endif
    {{-- <div class="container menu">
        <div class="rnr_services_card card">
            <div class="menu-img">
                <img src="{{ asset('assets/images/annexure.png') }}" alt="Annexure II" class="img-fluid">
            </div>
            <div class="menu-title">Annexure II</div>
            <div class="menu-description">Issuance of Eligibility Order/Annexure-2 of Project Affected Persons.</div>
            <a href="{{ route('annexure2') }}" class="menu-button btn btn-primary btn-sm">
                <div class="go-arrow">Visit →</div>
            </a>
        </div>
        <div class="rnr_services_card card">
            <div class="menu-img">
                <img src="{{ asset('assets/images/aminities.png') }}" alt="Social Facility" class="img-fluid">
            </div>
            <div class="menu-title">Social Facility</div>
            <div class="menu-description">Issuance of distribution letters of social welfare flats to registered housing development institutions.</div>
            <a href="{{ route('social-facility') }}" class="menu-button btn btn-primary btn-sm">
                <div class="go-arrow">Visit →</div>
            </a>
        </div>
        <div class="rnr_services_card card">
            <div class="menu-img">
                <img src="{{ asset('assets/images/association.png') }}" alt="Register Association" class="img-fluid">
            </div>
            <div class="menu-title">Register Association</div>
            <div class="menu-description">Registration of Association by the Deputy Registrar, MMRDA, Mumbai</div>
            <a href="{{ route('association') }}" class="menu-button btn btn-primary btn-sm">
                <div class="go-arrow">Visit →</div>
            </a>
        </div>
        <div class="rnr_services_card card">
            <div class="menu-img">
                <img src="{{ asset('assets/images/society.png') }}" alt="Register Society" class="img-fluid">
            </div>
            <div class="menu-title">Register Society</div>
            <div class="menu-description">Registration of Cooperative Societies by the Deputy Registrar Cooperative Societies, MMRDA, Mumbai</div>
            <a href="{{ route('societyList') }}" class="menu-button btn btn-primary btn-sm">
                <div class="go-arrow">Visit →</div>
            </a>
        </div>
        <div class="rnr_services_card card">
            <div class="menu-img">
                <img src="{{ asset('assets/images/allotment.png') }}" alt="Allotment" class="img-fluid">
            </div>
            <div class="menu-title">Allotment</div>
            <div class="menu-description">Issuance of alternative site allocation letters to eligible project affected persons.</div>
            <a href="{{ route('rnr.allotment') }}" class="menu-button btn btn-primary btn-sm">
                <div class="go-arrow">Visit →</div>
            </a>
        </div>
    </div> --}}
</section>

<div class="Infographic_wrapper">
    <div class="Infographic_container">
        

        <!-- Step 1 -->
        <div class="step left">
            <div class="circle-number">1</div>
            <a href="{{ route('annexure2') }}" class="circle-wrapper">
                <div class="circle-inner">
                    <img src="{{ asset('assets/images/step1.png') }}">
                </div>
            </a>
            <div class="step-content">
                <a href="{{ route('annexure2') }}" class="text-decoration-none">
                    <h3>Annexure - II</h3>
                    <p>Issuance of Eligibility Order/Annexure-II of Project Affected Persons.</p>
                </a>
            </div>
            
        </div>

        <!-- Step 2 -->
        <div class="step right">
            <div class="circle-number">2</div>
            <a href="{{ route('societyList') }}" class="circle-wrapper">
                <div class="circle-inner">
                    <img src="{{ asset('assets/images/step2.png') }}">
                </div>
            </a>
            <div class="step-content">
                <a href="{{ route('societyList') }}" class="text-decoration-none">
                    <h3>Registrar Society</h3>
                    <p>Registration of Cooperative Societies by the Deputy Registrar Cooperative Societies, MMRDA, Mumbai.</p>
                </a>
            </div>
        </div>

        <!-- Step 3 -->
        <div class="step left">
            <div class="circle-number">3</div>
            <a href="{{ route('rnr.allotment') }}" class="circle-wrapper">
                <div class="circle-inner">
                    <img src="{{ asset('assets/images/step3.png') }}">
                </div>
            </a>
            <div class="step-content">
                <a href="{{ route('rnr.allotment') }}" class="text-decoration-none">
                    <h3>Allotment</h3>
                    <p>Issuance of alternative site allocation letters to eligible project affected persons.</p>
                </a>
            </div>
        </div>

        <!-- Step 4 -->
        <div class="step right">
            <div class="circle-number">4</div>
            <a href="{{ route('association') }}" class="circle-wrapper">
                <div class="circle-inner">
                    <img src="{{ asset('assets/images/step4.png') }}">
                </div>
            </a>
            <div class="step-content">
                <a href="{{ route('association') }}" class="text-decoration-none">
                    <h3>Registrar Association</h3>
                    <p>Registration of Association by the Deputy Registrar, MMRDA, Mumbai.</p>
                </a>
            </div>
        </div>

        <!-- Step 5 -->
        <div class="step left">
            <div class="circle-number">5</div>
            <a href="{{ route('social-facility') }}" class="circle-wrapper">
                <div class="circle-inner">
                    <img src="{{ asset('assets/images/step5.png') }}">
                </div>
            </a>
            <div class="step-content">
                <a href="{{ route('social-facility') }}" class="text-decoration-none">
                    <h3>Social Facility</h3>
                    <p>Issuance of distribution letters of social welfare flats to registered housing development institutions.</p>
                </a>
            </div>
        </div>
    </div>
</div>

@endsection