@extends('layouts.master')
@section('content')
    <div class="container-fluid">
        <div class="card shadow-sm mb-4 border-0 position-relative">
            <!-- Promo Badge -->
            @if(isset($promo))
            <div class="position-absolute" style="top: -10px; right: -10px;">
                <span class="badge badge-danger p-3 shadow-lg" style="font-size:16px; border-radius:10px;">
                    🎉 {{ $promo->discount }}% OFF till {{ \Carbon\Carbon::parse($promo->tilldate)->format('d M, Y') }}
                </span>
            </div>
            @endif

                <!-- Header -->
                <div class="card-header bg-white py-3 d-flex align-items-center justify-content-between">
                    <h5 class="mb-0 font-weight-bold text-primary">
                        <i class="fas fa-school mr-2"></i> Add New School
                    </h5>
                </div>

                <div class="card-body">
                    <form method="post" action="{{route('manager.addschoolform')}}" enctype="multipart/form-data">
                    @csrf

                    <!-- ================= BASIC INFO ================= -->
                        <h6 class="text-muted mb-3 text-uppercase">Basic Information</h6>
                        <div class="row">
                            <div class="col-md-9 mb-3">
                                <input type="hidden" name="promo_id" value="{{ optional($promo)->id }}">
                                <label class="font-weight-semibold">School Name</label>
                                <input type="text" class="form-control" name="name" placeholder="Enter School Name" required>
                            </div>
                            <div class="col-md-3 mb-3">
                                <label class="font-weight-semibold">Short Name</label>
                                <input type="text" class="form-control" name="short" placeholder="Short Name" required>
                            </div>
                        </div>

                        <!-- ================= ACCOUNT INFO ================= -->
                        <h6 class="text-muted mt-4 mb-3 text-uppercase">Account Information</h6>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label>Email</label>
                                <input type="email" class="form-control" name="email" placeholder="School Email" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label>Password</label>
                                <input type="password" class="form-control" name="password" placeholder="Create Password" required>
                            </div>
                        </div>

                        <!-- ================= CONTACT ================= -->
                        <h6 class="text-muted mt-4 mb-3 text-uppercase">Contact Details</h6>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label>Principal Name</label>
                                <input type="text" class="form-control" name="ceo_name" placeholder="Principal Name" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label>Contact Number</label>
                                <input type="text" class="form-control" name="cntctnum" placeholder="Phone Number" required>
                            </div>
                        </div>

                        <!-- ================= SUBSCRIPTION ================= -->
                        <h6 class="text-muted mt-4 mb-3 text-uppercase">Subscription</h6>
                        <div class="row">
                            {{--<div class="col-md-4 mb-3">--}}
                                {{--<label>Subscription Period</label>--}}
                                {{--<select class="form-control" name="period" required>--}}
                                    {{--<option value="" disabled selected>Select Period</option>--}}
                                    {{--<option value="1">1 Year</option>--}}
                                    {{--<option value="2">2 Years</option>--}}
                                    {{--<option value="3">3 Years</option>--}}
                                {{--</select>--}}
                            {{--</div>--}}
                            <div class="col-md-4 mb-3">
                                <label>Account Creation Charges</label>
                                <input type="number" class="form-control" value="{{$fee->advance}}" name="advance" required readonly>
                            </div>
                            <div class="col-md-4 mb-3">
                                <label>Subscription Charges</label>
                                <input type="number" class="form-control" value="{{ round($fee->amount, 2) }}" name="amount" readonly>
                            </div>
                        </div>

                        <!-- ================= ADDRESS ================= -->
                        <h6 class="text-muted mt-4 mb-3 text-uppercase">Address</h6>
                        <div class="form-group">
                            <textarea class="form-control" rows="3" name="address" placeholder="Full school address"></textarea>
                        </div>

                        <!-- ================= UPLOADS ================= -->
                        <h6 class="text-muted mt-4 mb-3 text-uppercase">Media & Branding</h6>
                        <div class="row text-center">
                            @php
                                $uploads = [
                                    ['label' => 'School Logo', 'input' => 'logo'],
                                    ['label' => 'Watermark', 'input' => 'watermark'],
                                    ['label' => 'Principal Image', 'input' => 'ceo_image'],
                                ];
                        @endphp
                        @foreach($uploads as $upload)
                            <div class="col-md-4 mb-4">
                                <div class="border rounded p-3 h-100">
                                    <label class="font-weight-bold d-block mb-2">
                                        {{ $upload['label'] }}
                                    </label>
                                    <img src="{{asset('assets/img/default.jpg')}}"
                                         class="logo-preview mb-2"
                                         data-input="{{ $upload['input'] }}"
                                         style="width:90px;height:90px;border-radius:12px;object-fit:cover;border:1px dashed #ccc;cursor:pointer;">
                                    <input type="file" id="{{ $upload['input'] }}" name="{{ $upload['input'] }}"
                                           class="d-none" accept="image/*">
                                    <small class="text-muted d-block">Click image to upload</small>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <!-- ================= ACTION ================= -->
                    <div class="text-right mt-4">
                        <button type="submit" class="btn btn-primary px-4">
                            <i class="fas fa-save mr-1"></i> Add School
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- picture code  -->
    <script>
        document.querySelectorAll(".logo-preview").forEach(img => {

            img.addEventListener("click", function () {
            document.getElementById(this.dataset.input).click();
        });

        document.getElementById(img.dataset.input).addEventListener("change", function (e) {
            const file = e.target.files[0];
            if (file) {
                img.src = URL.createObjectURL(file);
            }
        });
        });
    </script>
@endsection