@extends('admin.layouts.layout')

@section('content')
<div class="container-fluid">
  <!-- Breadcrumb-->
  <div class="row pt-2 pb-2">
    <div class="col-sm-9">
      <h4 class="page-title">{{ $page_mode == 'create' ? 'Add Home Slider' : 'Edit Home Slider' }}</h4>
    </div>
    <div class="col-sm-3">
      <div class="pull-right mb-2">
        <a class="btn btn-secondary" href="{{ route('home-slider.index') }}"> Back to List</a>
      </div>  
    </div>
  </div>
  <!-- End Breadcrumb-->

  @include('admin.layouts.message')

  <div class="row">
    <div class="col-lg-12">
      <div class="card">
        <div class="card-body">
          <form action="{{ $page_mode == 'create' ? route('home-slider.store') : route('home-slider.update', isset($data) ? $data->id : '') }}" method="POST" enctype="multipart/form-data">
            @csrf
            @if($page_mode == 'edit')
              @method('PUT')
            @endif

            <div class="form-group row">
              <label for="title" class="col-sm-3 col-form-label">Title <span class="text-danger">*</span></label>
              <div class="col-sm-9">
                <input type="text" id="title" class="form-control" name="title" value="{{ old('title', $page_mode == 'edit' && isset($data) ? $data->title : '') }}" required>
              </div>
            </div>

            <div class="form-group row">
              <label for="subtitle" class="col-sm-3 col-form-label">Subtitle</label>
              <div class="col-sm-9">
                <input type="text" id="subtitle" class="form-control" name="subtitle" value="{{ old('subtitle', $page_mode == 'edit' && isset($data) ? $data->subtitle : '') }}">
              </div>
            </div>

            <div class="form-group row">
              <label for="link" class="col-sm-3 col-form-label">Link (Product slug)</label>
              <div class="col-sm-9">
                <input type="text" id="link" class="form-control" name="link" value="{{ old('link', $page_mode == 'edit' && isset($data) ? $data->link : '') }}" placeholder="e.g. motor-insurance">
              </div>
            </div>

            <div class="form-group row">
              <label for="serial_no" class="col-sm-3 col-form-label">Serial No</label>
              <div class="col-sm-9">
                <input type="number" id="serial_no" class="form-control" name="serial_no" value="{{ old('serial_no', $page_mode == 'edit' && isset($data) ? $data->serial_no : '') }}" placeholder="Leave empty for auto ordering">
              </div>
            </div>

            <div class="form-group row">
              <label for="image" class="col-sm-3 col-form-label">Image</label>
              <div class="col-sm-9">
                <input type="file" id="image" class="form-control" name="image" accept="image/*" {{ $page_mode == 'create' ? 'required' : '' }}>
                @if($page_mode == 'edit' && isset($data) && $data->image)
                  <div class="mt-2">
                    <img src="{{ asset($data->image) }}" alt="{{ $data->title }}" style="max-width: 200px; max-height: 150px; border-radius: 4px;">
                    <p class="text-muted mt-1">Current Image</p>
                  </div>
                @endif
              </div>
            </div>

            <div class="form-group row">
              <label for="status" class="col-sm-3 col-form-label">Status</label>
              <div class="col-sm-9">
                @php
                  $isActive = $page_mode == 'create'
                    ? true
                    : (isset($data) && $data->status == 1);
                @endphp
                <input type="checkbox" id="slider_status" name="status" value="1" class="filled-in chk-col-success"
                  @if($isActive) checked @endif />
                <label for="slider_status">
                  @if($page_mode == 'create')
                    Active
                  @elseif($page_mode == 'edit' && isset($data))
                    {{ $data->status == 1 ? 'Active' : 'Inactive' }}
                  @endif
                </label>
              </div>
            </div>

            <div class="form-group row">
              <label class="col-sm-3 col-form-label"></label>
              <div class="col-sm-9">
                <button type="submit" name="action" value="SAVE" class="btn btn-primary">Submit</button>
              </div>
            </div>

          </form>
        </div>
      </div>
    </div>
  </div><!--End Row-->
</div>
<!-- End container-fluid-->
@endsection