@extends('layouts.app')
@section('content')
    <div class="page-content">
        <div class="container-fluid">

            <!-- start page title -->
            @include('layouts.partials.breadcrumb', ['title' => $title])

            <!-- end page title -->

            <div class='card'>
                <div class="card-header align-items-center d-flex">
                    <h5 class="card-title flex-grow-1 mb-0">View Detail</h5>
                    <div class="flex-shrink-0">
                        <a href="{{ route('setting.index') }}" class="btn btn-success waves-effect waves-light"><i
                                class="ri-add-fill me-1 align-bottom"></i> Back to List</a>
                    </div>
                </div>
                <div class="card-body">
                  <div style="margin-bottom: 20px;">
                      <p><b>Title:</b> <span>{{ $setting->title }}</span></p>
                      <p><b>Description:</b> <span>{{ $setting->description }}</span></p>
                      <p><b>Status:</b> <span class="{{ $setting->status == 11 ? 'text-success' : 'text-danger' }}">{{ $setting->status == 11 ? 'Active' : 'Inactive' }}</span></p>
                  </div>
                  <div style="margin-bottom: 20px;">
                      <p><b>Email:</b> <span>{{ $setting->email }}</span></p>
                      <p><b>Address:</b> <span>{{ $setting->address }}</span></p>
                      <p><b>Phone:</b> <span>{{ $setting->phone }}</span></p>
                      <p><b>Secondary Phone:</b> <span>{{ $setting->secondary_phone }}</span></p>
                      <p><b>Google Map:</b> <span>{{ $setting->google_map }}</span></p>
                  </div>
                  <div style="margin-bottom: 20px;">
                      <p><b>Thumb:</b></p>
                      <div style="width: 25%; height: 200px;">
                          <img src="{{ asset($setting->thumb) }}" style="max-width: 100%; max-height: 100%; object-fit: cover;">
                      </div>
                  </div>
                  <div style="margin-bottom: 20px;">
                      <p><b>Logo:</b></p>
                      <div style="width: 25%; height: 200px;">
                          <img src="{{ asset($setting->logo) }}" style="max-width: 100%; max-height: 100%; object-fit: cover;">
                      </div>
                  </div>
                  <div class="d-flex justify-content-between">
                      <div>
                          <p><b>Created On:</b> <span>{{ $setting->created_at }}</span></p>
                          <p><b>Created By:</b> <span>{{ $setting->createdBy }}</span></p>
                      </div>
                      <div>
                          <p><b>Updated On:</b> <span>{{ $setting->updated_at }}</span></p>
                          <p><b>Updated By:</b> <span>{{ $setting->updatedBy }}</span></p>
                      </div>
                  </div>
              </div>

            </div>
        </div>
    </div>
@endSection