@extends('layout.layout')
@section('reporting','active')
@section('content')

<!-- Main content -->
<section class="content">

    <section class="content-header">
        <div class="container-fluid">

            <!-- Subtitle -->
            <div class="row mb-2 mt-3">
                <div class="col-sm-12 pl-3 pr-3">
                    <h1 class="text-ultra"><a href="javascript:history.back()" id="arrow-right"><i class="fas fa-angle-left mr-2"></i></a> Scan Summary</h1>
                </div>
            </div>


            <!-- Stat Cards -->
            <div class="card-row-wrapper mt-4 d-flex justify-content-center">
                <div class="d-flex flex-nowrap">

                    <!-- Total Walls -->
                    <div class="card card-min d-flex justify-content-center">
                        <div class="card-body d-flex flex-column align-items-center text-center ml-2 mr-4">
                            <p class="card-title">
                                <i class="fas fa-archive fa-2x rounded-circle p-3 icon-bg" style="background-color:#FEDD00;" class="fas fa-archive fa-2x rounded-circle p-3"></i>
                            </p>
                            <p class="card-text mt-2">Total Walls</p>
                            <p class="card-text" style="margin-top: -15px; font-family: 'Gotham-Bold';font-size: 18px;color:#FEDD00">{{ $wall_count }}</p>
                        </div>
                    </div>

                    <!-- Scanned -->
                    <div class="card card-min">
                        <div class="card-body d-flex flex-column align-items-center text-center ml-3 mr-3">
                            <p class="card-title">
                                <i class="fas fa-check-square fa-2x rounded-circle p-3 icon-bg" style="background-color:#28a745;" class="fa fa-check-square fa-2x rounded-circle p-3"></i>
                            </p>
                            <p class="card-text mt-2">Scanned</p>
                            <p class="card-text" style="margin-top: -15px;font-family: 'Gotham-Bold';font-size: 18px;color:#28a745">{{ $wall_scanned }} / {{ $wall_count }}</p>
                        </div>
                    </div>

                    <!-- Pending -->
                    <div class="card card-min">
                        <div class="card-body d-flex flex-column align-items-center text-center ml-4 mr-2">
                            <p class="card-title">
                                <i class="fas fa-hourglass fa-2x rounded-circle p-3 icon-bg" style="background-color:#b2b2b2;" class="fa fa-hourglass fa-2x rounded-circle p-3"></i>
                            </p>
                            <p class="card-text mt-2">Pending</p>
                            <p class="card-text" style="margin-top: -15px;font-family: 'Gotham-Bold';font-size: 18px;color:#b2b2b2 ">{{ $wall_pending }} / {{ $wall_count }}</p>
                        </div>
                    </div>

                </div>
            </div>

            <!-- Progress -->
            <div class="progress ml-2 mr-2">
                <div class="progress-bar scan-summary-progress-bar" role="progressbar"
                     style="width: {{ $progress }}%; background-color: {{ $progress == 100 ? '#28a745' : '#000000' }};"
                     aria-valuenow="{{ $progress }}" aria-valuemin="0" aria-valuemax="100">
                </div>
            </div>
            <div class="d-flex justify-content-between align-items-center mr-2 ml-2 mt-2">
                <span style="font-family: 'Gotham-Medium'; font-size: 1rem; color: {{ $progress == 100 ? '#28a745' : '#000000' }}">
                    {{ number_format($progress, 1) }}% Complete
                </span>
                @if($scanned_walls->isEmpty())
                    <!-- No scanned walls -->
                    <button type="button"
                            class="btn btn-secondary btn-sm ml-2 disabled"
                            style="font-family: 'Gotham-Book'; border-radius: 5px;" >
                        <i class="far fa-times-circle mr-1" style="color:#fff"></i> No Scans
                    </button>
                @elseif($progress == 100 && !$submitted_date)
                        @if($role == 2)
                            <!-- Enabled button for role 2 -->
                            <button type="button"
                                    class="btn btn-success btn-sm ml-2"
                                    style="font-family: 'Gotham-Book'; border-radius: 5px;"
                                    onclick="submitWall()">
                                <i class="fa fa-paper-plane mr-1"></i> Submit Scans
                            </button>
                        @else
                            <!-- Disabled button for role 1 -->
                            <button type="button"
                                    class="btn btn-secondary btn-sm ml-2 disabled"
                                    style="font-family: 'Gotham-Book'; border-radius: 5px;"
                                    disabled>
                                <i class="fa fa-paper-plane mr-1"></i> Submit Scans
                            </button>
                        @endif
                @elseif($progress == 100 && $submitted_date)
                    <button type="button"
                            class="btn btn-dark btn-sm ml-2"
                            style="font-family: 'Gotham-Book'; border-radius: 5px;" disabled>
                        <i class="fa fa-check-circle mr-1"></i> Submitted
                    </button>
                @else
                    <button type="button"
                            class="btn btn-secondary btn-sm ml-2 disabled"
                            style="font-family: 'Gotham-Book'; border-radius: 5px;">
                        <i class="fa fa-lock mr-1" style="color:#fff"></i> Complete All
                    </button>
                @endif
            </div>


            <!-- Nav Buttons -->
            <div class="d-flex justify-content-center mt-2">
                <div class="card p-1 border" 
                     style="width:400px; min-width:355px; border-radius: 13px; box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.15);background-color:#e4e4e4;">
                    <div class="card-body d-flex gap-2">
                        <button type="button" id="btn-wall-scanned"
                                class="btn btn-outline-light scan-summary-buttons p-2 w-100 mr-2 active"
                                style="font-family: 'Gotham-Book'; border-radius:10px;">
                            <i class="far fa-check-square mr-2"></i> ({{ $wall_scanned }})
                        </button>
                        <button type="button" id="btn-wall-pending"
                                class="btn btn-outline-light scan-summary-buttons p-2 w-100"
                                style="font-family: 'Gotham-Book'; border-radius:10px;">
                            <i class="fas fa-hourglass mr-2"></i> ({{ $wall_pending }})
                        </button>
                    </div>
                </div>
            </div>

        </div>
        <!-- Scanned Section -->
        <div class="pl-3 pr-3" id="section-scanned" style="display:block;">
            <div id="wall-list">
                @forelse ($scanned_walls as $wall)
                    <a href="{{ route('wall.sales.wall.information', ['wall_list_id' => $wall->wall_list_id]) }}">
                    <div class="card mb-2 pl-3 pr-3 pt-2 pb-1"
                        style="border-radius:12px; background:#f8f8f8; box-shadow:0 2px 5px rgba(0,0,0,0.05); font-family:'Gotham-Book';">
                        <div class="d-flex align-items-center">
                            <i class="fas fa-check-circle ml-2 mr-2" style="font-size: 1.8rem; color:#212529;"></i>
                            <div class="ml-3 flex-fill">
                                <div class="d-flex justify-content-between align-items-center">
                                    <strong style="font-family:'Gotham-Medium'; font-size:1rem; color: #212529">
                                        {{ $wall->wall_serial }}
                                    </strong>
                                    <div class="d-flex align-items-center" style="gap:10px; font-family:'Gotham-Book';">
                                        <span class="badge badge-primary text-white ml-4" style="padding: 6px !important;">{{ $wall->wall_meter }}m</span>
                                        <div class="ml-auto" style="font-family: 'Gotham-Book';">
                                            <span class="badge badge-success" style="padding: 6px !important;">
                                                Scanned
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="pt-2 pb-1 d-flex justify-content-between align-items-center">
                                    <small style="color:#888;">{{ $wall->wall_description}}</small>
                                </div>
                            </div>
                        </div>
                    </div>
                    </a>
                @empty
                    <div class="d-flex flex-column justify-content-center align-items-center" 
                        style="min-height:40vh; margin-top:2rem;">
                        <i class="fas fa-qrcode mb-4" style="font-size:7rem; color:#6c757d;"></i>
                        <p style="font-family:'Gotham-Book'; color:#6c757d;">No walls have been scanned yet</p>
                    </div>
                @endforelse
            </div>
        </div>
        <!-- Pending Section -->
        <div class="pl-3 pr-3" id="section-pending" style="display:none;">
            <div id="pending-wall-list">
                @forelse ($pending_walls as $wall)
                    <a href="{{ route('wall.sales.wall.information', ['wall_list_id' => $wall->wall_list_id]) }}">
                    <div class="card mb-2 pl-3 pr-3 pt-2 pb-1"
                        style="border-radius:12px; background:#f8f8f8; box-shadow:0 2px 5px rgba(0,0,0,0.05); font-family:'Gotham-Book';">
                        <div class="d-flex align-items-center">
                            <i class="fas fas fa-hourglass ml-2 mr-2" style="font-size: 1.8rem; color:#212529;"></i>
                            <div class="ml-3 flex-fill">
                                <div class="d-flex justify-content-between align-items-center">
                                    <strong style="font-family:'Gotham-Medium'; font-size:1rem; color: #212529">
                                        {{ $wall->wall_serial }}
                                    </strong>
                                    <div class="d-flex align-items-center" style="gap:10px; font-family:'Gotham-Book';">
                                        <span class="badge badge-primary text-white ml-4" style="padding: 6px !important;">{{ $wall->wall_meter }}m</span>
                                        <div class="ml-auto" style="font-family: 'Gotham-Book';">
                                            <span class="badge badge-dark" style="padding: 6px !important;">
                                                Pending
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="pt-2 pb-1 d-flex justify-content-between align-items-center">
                                    <small style="color:#888;">{{ $wall->wall_description}}</small>
    
                                </div>
                            </div>
                        </div>
                    </div>
                    </a>
                @empty
                    <div class="d-flex flex-column justify-content-center align-items-center" 
                        style="min-height:40vh; margin-top:2rem;">
                        <i class="fas fa-hourglass-half mb-4" style="font-size:7rem; color:#6c757d;"></i>
                        <p style="font-family:'Gotham-Book'; color:#6c757d;">No pending walls</p>
                    </div>
                @endforelse
            </div>
        </div>


    </section>

</section>

@endsection

@section('javascript')
    <script src="{{ asset('js/wall-sales-report.js') }}"></script>
@endsection