@extends('frontend.layouts.master')

@section('content')
    <div style="background-color: #2980b9; color: white; padding: 20px;">
        <h3 class="text-center mt-2">Welcome {{ auth()->user()->name }}!! <i class="bi bi-person-lines-fill"></i>
        </h3>
    </div>
    <div class="container mt-4">
        <div class="row">
            <div class="col-md-3">
                <div class="card p-0">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="card-title">{{ auth()->user()->name }}!!</h5>
                    </div>
                    <div class="card-body p-0">
                        <ul class="new-nav nav-pills mt-3 ms-2 p-0" id="myTab" role="tablist"
                            style="flex-direction: column; justify-content:end; align-items:baseline;">
                            <li class="nav-item mb-3" role="presentation">
                                <button class="nav-link{{ Request::is('dashboard') ? ' active' : '' }}" id="profile-tab"
                                    data-bs-toggle="pill" data-bs-target="#profile" type="button" role="tab"
                                    aria-controls="profile" aria-selected="true">Dashboard</button>
                            </li>
                            <!--<li class="nav-item mb-3" role="presentation">-->
                            <!--    <button class="nav-link{{ Request::is('project') ? ' active' : '' }}" id="orders-tab"-->
                            <!--        data-bs-toggle="pill" data-bs-target="#orders" type="button" role="tab"-->
                            <!--        aria-controls="orders" aria-selected="true">Projects</button>-->
                            <!--</li>-->
                            <!--<li class="nav-item mb-3" role="presentation">-->
                            <!--    <button class="nav-link{{ Request::is('cart') ? ' active' : '' }}" id="cart-tab"-->
                            <!--        data-bs-toggle="pill" data-bs-target="#cart" type="button" role="tab"-->
                            <!--        aria-controls="cart" aria-selected="false">Cart</button>-->
                            <!--</li>-->
                        </ul>
                    </div>
                </div>
            </div>

            <div class="col-md-9 mb-5">
                <div class="tab-content" id="myTabContent">
                    <div class="tab-pane fade{{ Request::is('dashboard') ? ' show active' : '' }}" id="profile"
                        role="tabpanel" aria-labelledby="profile-tab">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title">User Details</h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="card mb-3">
                                            <div class="card-body d-flex justify-content-between align-items-center">
                                                <a href="#"><h5 class="card-title fs-3"><i class="bi bi-kanban-fill me-2" style="color: #2980b9;"></i>Projects
                                                </h5></a>
                                                <p class="card-text fs-3">{{ $projectCount }}</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="card mb-3">
                                            <div class="card-body  d-flex justify-content-between align-items-center">
                                                <h5 class="card-title fs-3"><i class="bi bi-cart-check-fill me-2"style="color: #2980b9;"></i>
                                                    Cart Items</h5>
                                                <p class="card-text fs-3">{{ $cartCount }}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <form action="{{ route('frontend.user.update') }}" method="POST">
                                    @csrf
                                    @method('PUT')

                                    <div class="mb-3">
                                        <label for="name" class="form-label">Name</label>
                                        <input type="text" class="form-control" id="name" name="name"
                                            value="{{ auth()->user()->name }}">
                                    </div>
                                    <div class="mb-3">
                                        <label for="email" class="form-label">Email address</label>
                                        <input type="email" class="form-control" id="email" name="email"
                                            value="{{ auth()->user()->email }}">
                                    </div>
                                    <div class="mb-3">
                                        <label for="password" class="form-label">New Password</label>
                                        <input type="password" class="form-control" id="password" name="password"
                                            placeholder="Enter new password">
                                    </div>
                                    <div class="mb-3">
                                        <label for="password_confirmation" class="form-label">Confirm New Password</label>
                                        <input type="password" class="form-control" id="password_confirmation"
                                            name="password_confirmation" placeholder="Confirm new password">
                                    </div>
                                    <!-- Add more fields as needed -->

                                    <button type="submit" class="btn btn-primary">Update</button>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade{{ Request::is('project') ? ' show active' : '' }}" id="orders"
                        role="tabpanel" aria-labelledby="orders-tab">
                        <div class="card">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h5 class="card-title">Your Projects</h5>
                                <a href="{{ route('frontend.orders.view') }}" class="btn btn-primary">View All</a>
                            </div>
                            <div class="card-body">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th>Title</th>
                                            <th>Project Value</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($projects as $order)
                                            <tr>
                                                <td>{{ $order['title'] }}</td>
                                                <td>{{ $order['project_value'] }}</td>
                                                <td>
                                                    <button class="btn btn-primary px-4 py-2 rounded-0"
                                                        onclick="window.open('{{ $order['file'] }}')"><i
                                                            class="bi bi-download"></i></button>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                                <div class="mt-4 mb-5 d-flex justify-content-between align-items-center">
                                    @if ($orders->currentPage() > 1)
                                        <a href="{{ $orders->previousPageUrl() }}" class="btn btn-secondary me-2"
                                            style="background-color: #fb7861; padding: 8px 20px 8px 20px;">Previous</a>
                                    @endif

                                    <ul class="pagination m-0">
                                        @for ($i = 1; $i <= $orders->lastPage(); $i++)
                                            <li class="page-item {{ $i == $orders->currentPage() ? 'active' : '' }}">
                                                <a href="{{ $orders->url($i) }}" class="page-link fs-3"
                                                    style="background-color: #ffffff; border-color: #ffffff; color: {{ $i == $orders->currentPage() ? '#fb7861' : '#fb7861' }}">
                                                    {{ $i }}
                                                </a>
                                            </li>
                                        @endfor
                                    </ul>

                                    @if ($orders->currentPage() < $orders->lastPage())
                                        <a href="{{ $orders->nextPageUrl() }}" class="btn btn-secondary"
                                            style="background-color: #fb7861; padding: 8px 20px 8px 20px;">Next</a>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade{{ Request::is('cart') ? ' show active' : '' }}" id="cart"
                        role="tabpanel" aria-labelledby="cart-tab">
                        <div class="container">
                            <div class="card">
                                <div class="card-header d-flex justify-content-between align-items-center">
                                    <h5 class="card-title">Your Cart</h5>
                                    <a href="{{ route('frontend.cart.index') }}" class="btn btn-primary">View All</a>
                                </div>
                                <div class="card-body">
                                    <table class="table">
                                        <thead>
                                            <tr>
                                                <th>Title</th>
                                                <th>Project Value</th>
                                                <th>Image</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($cart as $index => $item)
                                                <tr>
                                                    <td>{{ $item['title'] }}</td>
                                                    <td>{{ $item['price'] }}</td>
                                                    <td>
                                                        <img src="https://www.iid.org.in/basepath/{{ $item['thumbnail'] }}"
                                                            class="img-fluid" alt="Thumbnail" width="100px" height="100px">
                                                    </td>
                                                    <td>
                                                        <form
                                                            action="{{ route('frontend.cart.delete', ['projectId' => $index]) }}"
                                                            method="POST">
                                                            @csrf
                                                            @method('DELETE')
                                                            <button type="submit" class="btn btn-danger"><i
                                                                    class="bi bi-x-lg"></i></button>
                                                        </form>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection