@extends('layouts.admin')

@section('content')
  @php
    $summaryCards = [
        'Account Type' => 'Institute / School Login',
        'Access Mode' => 'Email, mobile and password',
        'Admin Control' => 'Created by platform admin',
    ];
  @endphp

  <div class="card-header">
    <h4>Add Institute</h4>
  </div>
  <div class="card-body">
    @include('admin.partials.flash-messages')

    <div class="portal-page-shell">
      <div class="portal-hero-card">
        <div class="portal-hero-main">
          <div class="portal-hero-copy">
            <h5>Create New Institute</h5>
            <p>Create a fresh institute or school login with basic contact details, address, password and logo in one place.</p>
            <div class="portal-chip-list">
              <span class="portal-chip">Admin Managed</span>
              <span class="portal-chip">Ready for Students</span>
              <span class="portal-chip">Logo Upload Supported</span>
            </div>
          </div>
          <img src="{{ asset('public/newlogo.jpg') }}" alt="Institute Logo" class="portal-hero-image">
        </div>
      </div>

      <div class="portal-summary-grid">
        @foreach($summaryCards as $label => $value)
          <div class="portal-summary-card">
            <span>{{ $label }}</span>
            <strong>{{ $value }}</strong>
          </div>
        @endforeach
      </div>

      <form action="{{ route('admin.saveinstitute') }}" method="post" class="portal-form-shell">
        @csrf

        <div class="portal-form-section">
          <h6>Basic Information</h6>
          <p>Enter the primary account details that will be used for institute access.</p>
          <div class="portal-form-grid">
            <div class="form-group portal-form-group">
              <label for="institutename">Institute Name</label>
              <input type="text" class="form-control" id="institutename" name="institutename" value="{{ old('institutename') }}" maxlength="200" placeholder="Institute Name" required>
            </div>
            <div class="form-group portal-form-group">
              <label for="emailid">Email Address</label>
              <input type="email" class="form-control" id="emailid" name="emailid" value="{{ old('emailid') }}" maxlength="200" placeholder="Email Address" required>
            </div>
            <div class="form-group portal-form-group">
              <label for="mobilenumber">Mobile Number</label>
              <input type="text" class="form-control" id="mobilenumber" name="mobilenumber" value="{{ old('mobilenumber') }}" maxlength="10" minlength="10" placeholder="10 digit mobile number" required oninput="this.value = this.value.replace(/\D/g, '').slice(0, 10);">
            </div>
          </div>
        </div>

        <div class="portal-form-section">
          <h6>Security Setup</h6>
          <p>Set the initial login password for this institute account.</p>
          <div class="portal-form-grid">
            <div class="form-group portal-form-group">
              <label for="password">Password</label>
              <input type="password" class="form-control" id="password" name="password" maxlength="20" minlength="6" placeholder="Enter password" autocomplete="new-password" required>
              <small class="portal-form-hint">Use a strong password so the institute login stays safe.</small>
            </div>
            <div class="form-group portal-form-group">
              <label for="confirmpassword">Confirm Password</label>
              <input type="password" class="form-control" id="confirmpassword" name="confirmpassword" maxlength="20" minlength="6" placeholder="Confirm password" autocomplete="new-password" required>
            </div>
          </div>
        </div>

        <div class="portal-form-section">
          <h6>Address Information</h6>
          <p>Save institute address and regional details used throughout the admin area.</p>
          <div class="portal-form-grid">
            <div class="form-group portal-form-group portal-form-group-full">
              <label for="addressname">Address</label>
              <input type="text" class="form-control" id="addressname" name="addressname" value="{{ old('addressname') }}" maxlength="500" placeholder="Institute address" required>
            </div>
            <div class="form-group portal-form-group">
              <label for="statename">State</label>
              <input type="text" class="form-control" id="statename" name="statename" value="{{ old('statename') }}" maxlength="200" placeholder="State Name" required>
            </div>
            <div class="form-group portal-form-group">
              <label for="cityname">City</label>
              <input type="text" class="form-control" id="cityname" name="cityname" value="{{ old('cityname') }}" maxlength="200" placeholder="City Name" required>
            </div>
          </div>
        </div>

        <div class="portal-form-section">
          <h6>Branding</h6>
          <p>Upload institute logo, monogram or label image used across the platform.</p>
          <div class="portal-upload-shell">
            <div id="targetLayer" class="portal-upload-preview">
              <img src="{{ asset('public/newlogo.jpg') }}" alt="Default Institute Logo">
            </div>
            <div class="loading" style="display:none; text-align:center;">
              <img src="{{ asset('public/admin/loadspinner.gif') }}" style="width:80px;" alt="Loading">
            </div>
            <div class="portal-form-actions">
              <p class="portal-inline-note">You can save the institute even without uploading a logo.</p>
              <div>
                <a id="newuploadphoto" href="#" class="btn btn-outline-primary">Upload Logo</a>
                <button type="submit" class="btn btn-primary">Save Institute</button>
              </div>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>

  @include('admin.partials.attachment-upload-form')
@endsection
