@extends('frontend.layout.main')
@section('main-container')
    <style>
        .host,
        .domain,
        img {
            width: 90px;
            height: 90px;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            row-gap: 20px;
        }

        .images {
            display: flex;
            justify-content: space-around;
        }

        .domain::after {
            content: '';
            position: absolute;
            height: 2px;
            width: 100px;
            transform: translateX(100%);

            background-color: #FC6736;
            top: 50%;
            animation: moveLeft 2s infinite linear 0.65s forwards;
            ;

        }

        .host::before {
            content: '';
            position: absolute;
            height: 2px;
            width: 100px;
            background-color: #125C13;
            top: 50%;
            right: 0;
            transform: translateX(-100%);
            animation: moveRight 2s infinite linear 0.65s forwards;
            ;
        }

        @keyframes moveLeft {
            0% {
                left: 0;
            }

            100% {
                left: 200px;
                opacity: 0;
            }
        }

        @keyframes moveRight {
            0% {
                right: 0;
            }

            100% {
                right: 200px;
                opacity: 0;

            }
        }

        .connecting {
            position: absolute;
            top: 90%;
            font-weight: bold;
        }

        .single-banner {
            background: url('../../frontend/images/new/search.png');
            background-repeat: no-repeat !important;
            background-position: center !important;
            background-size: cover !important;
            padding: 100px 0px !important;
            position: relative !important;
            z-index: 1;
        }
    </style>


    <style>
        .btn-buy {
            background: #0044bb !important;
            color: white !important;
            width: 175px !important;
        }

        .alert {
            padding: 15px;
            display: flex;
            justify-content: space-between;
            border-radius: 4px;
            align-items: center;
        }

        .searchBar {
            display: flex;
            column-gap: 5px;
        }

        .searchInput {
            width: 90%;
            padding: 15px;
            border-radius: 5px;
            box-shadow: 0px 2px 5px #c4c4d3;
            color: black;

        }
    </style>

    <section class="single-banner dashboard-banner">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="single-content">
                        <h2>{{ $PageHeading }}</h2>
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                            <li class="breadcrumb-item active" aria-current="page">{{ $PageHeading }}</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="dash-header-part d-none">
        <div class="container">
            <div class="dash-header-card">
                <div class="row">
                    <div class="col-lg-5">
                        <div class="dash-header-left">
                            <div class="dash-avatar">
                                <a href="#"><img src="{{ asset('frontend/images/avatar/01.jpg') }}"
                                        alt="avatar"></a>
                            </div>
                            <div class="dash-intro">
                                <h4><a href="#">{{ Session::get('name') }}</a></h4>
                                <!-- <h5>new seller</h5> -->
                                <ul class="dash-meta">
                                    <li><i class="fas fa-phone-alt"></i><span>{{ Session::get('phone') }}</span></li>
                                    <li><i class="fas fa-envelope"></i><span>{{ Session::get('email') }}</span></li>
                                    <!-- <li><i class="fas fa-map-marker-alt"></i><span>Los Angeles, West America</span></li> -->
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-7">
                        <div class="dash-header-right">
                            <div class="dash-focus dash-list">
                                <h2>${{ Session::get('balance') }}</h2>
                                <p>Balance</p>
                            </div>
                            <!-- <div class="dash-focus dash-book">
               <h2>2433</h2>
               <p>total follower</p>
              </div>
              <div class="dash-focus dash-rev">
               <h2>2433</h2>
               <p>total review</p>
              </div> -->
                        </div>
                    </div>
                </div>

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

    <section class="dash-header-part" style="padding: 30px;">
        <div class="container">
            <div class="dash-header-card">
                @if (session('success'))
                    <div class="alert alert-success">
                        {{ session('success') }}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                @endif

                <!-- Search Bar Implementation -->
                <div class="row" style="margin-top: 30px;">
                    <div class="col-lg-12">
                        <div style="margin-bottom: 50px; text-align: center;">
                            <h1>Affliate Programming</h1>
                        </div>
                        @if (session('error'))
                            <div class="alert alert-danger">
                                {{ session('error') }}
                            </div>
                        @endif



                        <!-- Form to submit business request -->
                        <form method="POST" action="{{ route('RequestAWebPageStore') }}">
                            @csrf
                            <div class="form-group">
                                <label for="name"><strong>Name:</strong></label>
                                <input type="text" class="form-control" id="name" name="name"
                                    value="{{ old('name') }}">
                                @error('name')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <label for="phone_number"><strong>Phone Number:</strong></label>
                                <input type="text" class="form-control" id="phone_number" name="phone_number"
                                    value="{{ old('phone_number') }}">
                                @error('phone_number')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <label for="project_name"><strong>Project Name:</strong></label>
                                <input type="text" class="form-control" id="project_name" name="project_name"
                                    value="{{ old('project_name') }}">
                                @error('project_name')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <label for="about_project"><strong>About Your Project:</strong></label>
                                <textarea class="form-control" id="about_your_project" name="about_your_project" rows="3">{{ old('about_project') }}</textarea>
                                @error('about_your_project')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </form>


                    </div>
                </div>
            </div>
        </div>
    </section>
 <section class="inner-section compare-part">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="table-scroll">
                        <table class="table-list">
                            <thead class="table-head">
                                <tr>
                                    <th scope="col">Sr.</th>
                                    <th scope="col">User Detail</th>
                                    <th scope="col">Project Name</th>
                                    <th scope="col">Project Detail</th>
                                    <th scope="col">Status</th>
                                    {{-- <th scope="col">Action</th> --}}
                                </tr>
                            </thead>
                            <tbody class="table-body">
                                @foreach ($web as $index => $data)
                                    <tr>
                                        <td class="table-number">
                                            <h6>{{ $index + 1 }}</h6>
                                        </td>

                                        <td class="table-price">
                                            <h5>
                                                Name: {{ $data->name }} <br>
                                                Phone #: {{ $data->phone_number }}
                                            </h5>
                                        </td>

                                        <td class="table-price">
                                            <h5>{{ $data->project_name }}</h5>
                                        </td>

                                        <td class="table-price">
                                            <h5>{{ $data->about_your_project ? substr($data->about_your_project, 0, 30) : 'N/A' }}
                                            </h5>
                                        </td>
                                        <td class="table-status">
                                            @if ($data->status == 1)
                                                <h6 class="btn btn-primary status-btn" data-id="{{ $data->id }}">Action Taken
                                                </h6>
                                            @endif
                                            @if ($data->status == 0)
                                                <h6 class="btn btn-danger status-btn" data-id="{{ $data->id }}">Pending </h6>
                                            @endif
                                        </td>


                                        {{-- <td class="table-action">
                                    <a href="" class="btn btn-primary">Add Balance</a>
                                </td> --}}
                                    </tr>
                                @endforeach


                            </tbody>
                        </table>
                    </div>
                    <!-- <div class="compare-btn center-50"><a href="#" class="btn btn-inline"><i class="fas fa-eye"></i><span>show more list</span></a></div> -->
                </div>
            </div>
        </div>
    </section>
    
@endsection
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>