@extends('layouts.theme_selector')

@section('content')
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-8">

        @include('layouts.alerts.error')
        @include('layouts.alerts.success')

        <div class="card glass-card border-0 shadow-lg mb-4">

          <div class="card-header py-3 border-0 d-flex align-items-center"
            style="background: var(--sp-brand-blue) !important;">
            <a href="{{ url()->previous() }}"
              class="btn btn-sm glass-brand-red rounded-circle me-3 shadow-sm border-0 d-flex align-items-center justify-content-center"
              style="width:35px;height:35px;">
              <i class="bi bi-chevron-left text-white"></i>
            </a>
            <div>
              <h5 class="mb-0 fw-bold shadow-text text-white">Cambio de Jerarquía</h5>
              <small class="text-white opacity-75">Reasignación de PAS y Organizadores</small>
            </div>
          </div>

          <div class="card-body px-4 py-4">

            {{-- VERTICAL --}}
            <div class="mb-4">
              <h6 class="fw-semibold theme-content-title mb-3">
                <i class="bi bi-arrow-up-circle me-2 text-primary"></i>
                Vertical — de PAS a ORG
              </h6>
              <form action="{{ route('CambiarJerarquia') }}" method="post">
                @csrf
                <div class="row g-3 align-items-end justify-content-center">
                  <div class="col-md-4">
                    <label class="form-label small fw-semibold">Productor</label>
                    <input type="text" value="{{ old('productor') }}" class="form-control" placeholder="Código corto"
                      name="productor">
                  </div>
                  <div class="col-md-1 text-center pb-1">
                    <i class="bi bi-arrow-right fs-4 text-muted"></i>
                  </div>
                  <div class="col-md-4">
                    <label class="form-label small fw-semibold">Organizador</label>
                    <input type="text" value="{{ old('organizador') }}" class="form-control" placeholder="Código corto"
                      name="organizador">
                  </div>
                  <div class="col-md-3">
                    <button class="btn btn-primary w-100" type="submit">
                      <i class="bi bi-check-circle me-1"></i> Confirmar
                    </button>
                  </div>
                </div>
              </form>
            </div>

            <hr class="opacity-25">

            {{-- HORIZONTAL --}}
            <div class="mt-4">
              <h6 class="fw-semibold theme-content-title mb-3">
                <i class="bi bi-arrow-left-right me-2 text-warning"></i>
                Horizontal — de un ORG a otro ORG
              </h6>
              <form action="{{ route('CambioOrganizador') }}" method="post">
                @csrf
                <div class="row g-3 justify-content-center">
                  <div class="col-md-7">
                    <label class="form-label small fw-semibold">Códigos a mover</label>
                    <input type="text" value="{{ old('pase_masivo') }}" class="form-control"
                      placeholder="Códigos separados por punto o coma" name="pase_masivo">
                    <div class="form-text">Ej: 1111.2222,3333</div>
                  </div>
                  <div class="col-md-3">
                    <label class="form-label small fw-semibold">Nuevo Organizador</label>
                    <input type="text" value="{{ old('organizador_masivo') }}" class="form-control"
                      placeholder="Código corto" name="organizador_masivo">
                  </div>
                  <div class="col-md-2 d-flex align-items-end">
                    <button class="btn btn-warning w-100" type="submit">
                      <i class="bi bi-send me-1"></i> Enviar
                    </button>
                  </div>
                </div>
              </form>
            </div>

          </div>
        </div>

      </div>
    </div>
  </div>
@endsection