@extends('manager.layouts.app')
@section('page_title', $page_title)
@section('content')
<div class="container-fluid mt-3">
    @if(session('success'))
        <div id="session-flash-alert" class="alert alert-success border-0 shadow-sm mb-4 py-2 px-3 mx-auto text-center" role="alert" style="max-width: 500px; border-radius: 50px;">
            <span class="cil-check-circle mr-1 align-middle"></span>
            <span class="font-weight-bold small align-middle">{{ session('success') }}</span>
        </div>
    @endif
    <div class="card border-0 shadow-sm overflow-hidden">

        <div class="card-header bg-white border-0 py-3 px-4">
            <h4 class="card-title mb-0">{{ $p_title ?? '' }}</h4>
            <div class="small text-medium-emphasis">{{ $p_summary ?? '' }}</div>
        </div>
        
        <div class="bg-light px-4 border-top border-bottom">
            <ul class="nav nav-tabs border-0 facility-management-pills" id="homeTabs" role="tablist">
                <li class="nav-item"><a class="nav-link active py-3 font-weight-bold" data-toggle="tab" href="#panel-desc">Descriptions</a></li>
                <li class="nav-item"><a class="nav-link py-3 font-weight-bold" data-toggle="tab" href="#panel-vm">Core Values</a></li>
                <li class="nav-item"><a class="nav-link py-3 font-weight-bold" data-toggle="tab" href="#panel-pillars">Institutional Pillars</a></li>
                <li class="nav-item"><a class="nav-link py-3 font-weight-bold" data-toggle="tab" href="#panel-maps">Campus Addresses</a></li>
                <li class="nav-item"><a class="nav-link py-3 font-weight-bold" data-toggle="tab" href="#panel-leader">Leadership Messages</a></li>
                <li class="nav-item"><a class="nav-link py-3 font-weight-bold" data-toggle="tab" href="#panel-gallery">9-Grid Gallery Flow</a></li>
            </ul>
        </div>

        <form action="{{ route('manager.home.update') }}" method="POST" enctype="multipart/form-data" id="homeSettingsForm">
            @csrf
            <div class="card-body p-4 p-lg-5 bg-white">
                <div class="tab-content" id="homeTabsContent">
                    
                    <div class="tab-pane fade show active" id="panel-desc" role="tabpanel">
                        <div class="p-4 rounded border bg-light">
                            <h5 class="text-dark font-weight-bold mb-4">Homepage Descriptions Management</h5>
                            <div class="form-group mb-4">
                                <label class="text-muted small font-weight-bold text-uppercase">Hero Section Description</label>
                                <textarea name="general[hero]" class="form-control bg-white" rows="3">{{ $general['hero'] ?? '' }}</textarea>
                            </div>
                            <div class="form-group mb-4">
                                <label class="text-muted small font-weight-bold text-uppercase">Introduction Section Description</label>
                                <textarea name="general[intro]" class="form-control bg-white" rows="4">{{ $general['intro'] ?? '' }}</textarea>
                            </div>
                            <div class="form-group mb-0">
                                <label class="text-muted small font-weight-bold text-uppercase">Main Body Description</label>
                                <textarea name="general[body]" class="form-control bg-white" rows="5">{{ $general['body'] ?? '' }}</textarea>
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane fade" id="panel-vm" role="tabpanel">
                        <div class="row">
                            @foreach(['vision' => 'Vision', 'mission' => 'Mission'] as $vKey => $vLabel)
                                <div class="col-md-6 mb-3">
                                    <div class="p-3 rounded border bg-light h-100">
                                        <h5 class="text-dark font-weight-bold mb-3">{{ $vLabel }}</h5>
                                        <div class="form-group mb-2">
                                            <label class="text-muted small font-weight-bold text-uppercase">Value Name</label>
                                            <input type="text" name="general[{{$vKey}}][title]" class="form-control font-weight-bold" value="{{ $general[$vKey]['title'] ?? '' }}">
                                        </div>
                                        <div class="form-group mb-0">
                                            <label class="text-muted small font-weight-bold text-uppercase">Value Text</label>
                                            <textarea name="general[{{$vKey}}][desc]" class="form-control" rows="3">{{ $general[$vKey]['desc'] ?? '' }}</textarea>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <div class="tab-pane fade" id="panel-pillars" role="tabpanel">
                
                        <h5 class="text-dark font-weight-bold mb-3">Four Institutional Pillars Setup</h5>
                        <div class="row">
                            @foreach(($general['pillars'] ?? []) as $pIndex => $pillar)
                                <div class="col-md-6 mb-3">
                                    <div class="p-3 rounded border bg-light h-100">
                                        <div class="form-group mb-2">
                                            <label class="text-muted small font-weight-bold text-uppercase">Pillar #{{ $pIndex + 1 }} Title</label>
                                            <input type="text" name="general[pillars][{{$pIndex}}][title]" class="form-control font-weight-bold" value="{{ $pillar['title'] ?? '' }}">
                                        </div>
                                        <div class="form-group mb-0">
                                            <label class="text-muted small font-weight-bold text-uppercase">Pillar #{{ $pIndex + 1 }} Text</label>
                                            <textarea name="general[pillars][{{$pIndex}}][desc]" class="form-control" rows="3">{{ $pillar['desc'] ?? '' }}</textarea>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>    

                    <div class="tab-pane fade" id="panel-maps" role="tabpanel">
                        <div class="row">
                            @foreach(['boys' => 'Boys Campus Details', 'girls' => 'Girls Campus Details'] as $mKey => $mLabel)
                                <div class="col-md-6 mb-3">
                                    <div class="p-3 rounded border bg-light h-100">
                                        <h5 class="text-dark font-weight-bold mb-3">{{ $mLabel }}</h5>
                                        
                                        <div class="form-group mb-3">
                                            <label class="text-muted small font-weight-bold text-uppercase">Campus Name</label>
                                            <input type="text" name="general[maps][{{$mKey}}][name]" class="form-control" value="{{ $general['maps'][$mKey]['name'] ?? '' }}">
                                        </div>
                                        
                                        <div class="form-group mb-0">
                                            <label class="text-muted small font-weight-bold text-uppercase">Map Link</label>
                                            <input type="text" name="general[maps][{{$mKey}}][link]" class="form-control" value="{{ $general['maps'][$mKey]['link'] ?? '' }}">
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <div class="tab-pane fade" id="panel-leader" role="tabpanel">
                        @foreach(($leadership ?? []) as $lKey => $member)
                            <div class="p-4 mb-4 rounded border bg-light">
                                <h5 class="text-primary font-weight-bold text-capitalize mb-3">{{ str_replace('_', ' ', $lKey) }} Profile Details</h5>
                                <div class="row align-items-center">
                                    <div class="col-md-4 form-group mb-0">
                                        <label class="text-muted small font-weight-bold text-uppercase">Name</label>
                                        <input type="text" name="leadership[{{$lKey}}][name]" class="form-control" value="{{ $member['name'] ?? '' }}">
                                        <label class="text-muted small font-weight-bold text-uppercase mt-3 d-block">Upload New Photo File</label>
                                        <input type="file" name="leadership[{{$lKey}}][image]" class="form-control-file">
                                    </div>
                                    <div class="col-md-6 form-group mb-0">
                                        <label class="text-muted small font-weight-bold text-uppercase">Message Statement</label>
                                        <textarea name="leadership[{{$lKey}}][message]" class="form-control" rows="5">{{ $member['message'] ?? '' }}</textarea>
                                    </div>
                                    <div class="col-md-2 text-center">
                                        <label class="text-muted small font-weight-bold text-uppercase d-block mb-2">Saved File</label>
                                        <img src="{{ asset($member['image']) }}" class="img-thumbnail rounded shadow-sm" style="height: 100px; width: 100px; object-fit: cover;">
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <div class="tab-pane fade" id="panel-gallery" role="tabpanel">
                        <div class="alert alert-info py-2 px-3 small border-0 mb-4">
                            <i class="fas fa-images mr-2"></i>Slots are listed in numerical sequence (1-9) to match your asymmetrical homepage grid layout.
                        </div>
                        <div class="row">
                            @foreach(($gallery ?? []) as $gIndex => $imagePath)
                                <div class="col-md-4 mb-4">
                                    <div class="card h-100 border p-2 bg-light shadow-none">
                                        <span class="badge badge-dark align-self-start mb-2 px-2 py-1">Grid Position #{{ $gIndex + 1 }}</span>
                                        <div class="text-center mb-2">
                                            <img src="{{ asset($imagePath) }}" class="img-fluid rounded border" style="height: 130px; width: 100%; object-fit: cover;">
                                        </div>
                                        <div class="card-body p-0 mt-1">
                                            <label class="text-muted small font-weight-bold text-uppercase">Replace Image File</label>
                                            <input type="file" name="gallery[{{$gIndex}}]" class="form-control-file">
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>

                </div>
            </div>
            
            <div class="card-footer bg-white border-top text-right py-3 px-4">
                <button type="submit" class="btn btn-slate-save px-5 font-weight-bold shadow-sm">Save Global Content</button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('footer-scripts')
<script>
    $(document).ready(function () {
        // Quick native initialization for Bootstrap custom horizontal tabs
        $('#homeTabs a').on('click', function (e) {
            e.preventDefault();
            $(this).tab('show');
        });
        // Auto-dismiss alert after 4 seconds
        const $alert = $('#session-flash-alert');
        if ($alert.length) {
            setTimeout(() => $alert.fadeTo(300, 0, () => $alert.remove()), 4000);
        }
    });
</script>
@endpush