<?php
use App\Models\User;
use App\Models\Settings;
$setting = Settings::first();
?>
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <title>ERP | Dashboard</title>

    <meta name="description" content="ERP | Dashboard">
    <meta name="author" content="pixelcave">
    <meta name="robots" content="index, follow">

    <!-- Open Graph Meta -->
    <meta property="og:title" content="ERP | Dashboard">
    <meta property="og:site_name" content="ERP | Dashboard">
    <meta property="og:description" content="ERP | Dashboard">
    <meta property="og:type" content="website">
    <meta property="og:url" content="">
    <meta property="og:image" content="">

    <!-- Icons -->
    <!-- The following icons can be replaced with your own, they are used by desktop and mobile browsers -->
    <link rel="shortcut icon" href="{{ asset('assets/media/favicons/favicon.png') }}">
    <link rel="icon" type="image/png" sizes="192x192" href="{{ asset('assets/media/favicons/favicon-192x192.png') }}">
    <link rel="apple-touch-icon" sizes="180x180" href="{{ asset('assets/media/favicons/apple-touch-icon-180x180.png') }}">
    <!-- END Icons -->

    <!-- Stylesheets -->
    <!-- Dashmix framework -->
    <link rel="stylesheet" id="css-main" href="{{ asset('assets/css/dashmix.min.css') }}">
        <link rel="stylesheet" href="{{ asset('assets/js/plugins/select2/css/select2.min.css') }}">

<style>
    .login-logo{
        width:140px;
    }
    @media only screen and (max-width: 600px) {
  .login-logo{
        width:140px;
    }
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
        margin: .25rem .25rem .25rem 0;
    height: 1.375rem;
    line-height: 1.375rem;
    color: #fff;
    font-size: .875rem;
    font-weight: 600;
    background-color: #0665d0;
    border: none;
    border-radius: .375rem;
}
</style>
  </head>

  <body>
   
    <div id="page-container">

      <!-- Main Container -->
      <div id="page-container">

      <!-- Main Container -->
      <main id="main-container">
        <!-- Page Content -->
        <div class="bg-image" style="background-image: url('assets/media/photos/photo12@2x.jpg');">
          <div class="row g-0 justify-content-center bg-black-75">
            <!-- Main Section -->
            <div class="hero-static col-md-6 d-flex align-items-center bg-body-extra-light">
              <div class="p-3 w-100">
                <!-- Header -->
                <div class="mb-3 text-center">
                   <?php if($setting && $setting->logo != null){ ?> 
                    <a class="link-fx fw-bold fs-1" href="{{url('booking')}}">
                     <img class="login-logo mb-3"   src="{{ asset('db_files/other/'.$setting->logo.'') }}" alt="">
                  </a>
                  <?php } ?>
                  <p class="text-uppercase fw-bold fs-sm text-muted">Create a Booking</p>
                </div>
                <!-- END Header -->

                <!-- Sign Up Form -->
                <!-- jQuery Validation (.js-validation-signup class is initialized in js/pages/op_auth_signup.min.js which was auto compiled from _js/pages/op_auth_signup.js) -->
                <!-- For more info and examples you can check out https://github.com/jzaefferer/jquery-validation -->
                <div class="row g-0 justify-content-center">
                  <div class="col-sm-10 col-xl-8">
                     @if(Session::has('success')) <div class="alert alert-success mt-2 mb-2">{{ Session::get('success') }}</div>@endif
                    @if(Session::has('fail')) <div class="alert alert-danger mt-2 mb-2">{{ Session::get('fail') }}</div>@endif
                    <form class="row" action="" method="POST" >
                    @csrf
                      <div class="py-3">
                        <div class="mb-4">
                            <label class="form-label">Name</label>
                          <input type="text" class="form-control form-control-lg form-control-alt" id="signup-username" name="name" placeholder="Name">
                          @if($errors->has("name")) <div class="alert alert-danger mt-2">{{ $errors->first('name') }}</div>@endif
                        </div>
                        <div class="mb-4">
                          <label class="form-label">Email</label>
                          <input type="email" class="form-control form-control-lg form-control-alt" id="signup-email" name="email" placeholder="Email">
                          @if($errors->has("name")) <div class="alert alert-danger mt-2">{{ $errors->first('email') }}</div>@endif
                        </div>
                        <div class="mb-4">
                            <label class="form-label">Phone Number</label>
                          <input type="text" class="form-control form-control-lg form-control-alt" id="signup-password" name="phone" placeholder="Phone Number">
                          @if($errors->has("name")) <div class="alert alert-danger mt-2">{{ $errors->first('phone') }}</div>@endif
                        </div>
                        <div class="mb-4">
                        <label class="form-label">Select Services Required</label>
                         <select class="js-select2 form-select" id="example-select2-multiple" name="services[]" style="width: 100%;" data-placeholder="Choose.." multiple>
                            <option></option>
                            <?php foreach($services as $service){ ?> 
                                <option value="{{$service->id}}">{{$service->name}}</option>
                            <?php } ?>
                        </select>
                        @if($errors->has("services")) <div class="alert alert-danger mt-2">{{ $errors->first('services') }}</div>@endif
                        </div>
                         <div class="mb-4">
                            <label class="form-label">Date</label>
                          <input type="date" class="form-control form-control-lg form-control-alt" id="signup-password" name="date" >
                          @if($errors->has("name")) <div class="alert alert-danger mt-2">{{ $errors->first('date') }}</div>@endif
                        </div>
                        <div class="mb-4">
                            <label class="form-label">Start Time</label>
                          <input type="time" class="form-control form-control-lg form-control-alt" id="signup-password" name="start_time" >
                          @if($errors->has("start_time")) <div class="alert alert-danger mt-2">{{ $errors->first('start_time') }}</div>@endif
                        </div>
                          <div class="mb-4">
                            <label class="form-label">End Time</label>
                          <input type="time" class="form-control form-control-lg form-control-alt" id="signup-password" name="end_time" >
                          @if($errors->has("end_time")) <div class="alert alert-danger mt-2">{{ $errors->first('end_time') }}</div>@endif
                        </div>
                      </div>
                      <div class="mb-4">
                        <button type="submit" class="btn w-100 btn-lg btn-hero btn-primary">
                          <i class="fa fa-fw fa-plus opacity-50 me-1"></i> Confirm Booking
                        </button>
                       
                      </div>
                    </form>
                  </div>
                </div>
                <!-- END Sign Up Form -->
              </div>
            </div>
            <!-- END Main Section -->
          </div>

          <!-- Terms Modal -->
          <div class="modal fade" id="modal-terms" tabindex="-1" role="dialog" aria-labelledby="modal-terms" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
              <div class="modal-content">
                <div class="block block-themed block-transparent mb-0">
                  <div class="block-header bg-primary-dark">
                    <h3 class="block-title">Terms &amp; Conditions</h3>
                    <div class="block-options">
                      <button type="button" class="btn-block-option" data-bs-dismiss="modal" aria-label="Close">
                        <i class="fa fa-fw fa-times"></i>
                      </button>
                    </div>
                  </div>
                  <div class="block-content">
                    <p>Dolor posuere proin blandit accumsan senectus netus nullam curae, ornare laoreet adipiscing luctus mauris adipiscing pretium eget fermentum, tristique lobortis est ut metus lobortis tortor tincidunt himenaeos habitant quis dictumst proin odio sagittis purus mi, nec taciti vestibulum quis in sit varius lorem sit metus mi.</p>
                    <p>Dolor posuere proin blandit accumsan senectus netus nullam curae, ornare laoreet adipiscing luctus mauris adipiscing pretium eget fermentum, tristique lobortis est ut metus lobortis tortor tincidunt himenaeos habitant quis dictumst proin odio sagittis purus mi, nec taciti vestibulum quis in sit varius lorem sit metus mi.</p>
                    <p>Dolor posuere proin blandit accumsan senectus netus nullam curae, ornare laoreet adipiscing luctus mauris adipiscing pretium eget fermentum, tristique lobortis est ut metus lobortis tortor tincidunt himenaeos habitant quis dictumst proin odio sagittis purus mi, nec taciti vestibulum quis in sit varius lorem sit metus mi.</p>
                    <p>Dolor posuere proin blandit accumsan senectus netus nullam curae, ornare laoreet adipiscing luctus mauris adipiscing pretium eget fermentum, tristique lobortis est ut metus lobortis tortor tincidunt himenaeos habitant quis dictumst proin odio sagittis purus mi, nec taciti vestibulum quis in sit varius lorem sit metus mi.</p>
                    <p>Dolor posuere proin blandit accumsan senectus netus nullam curae, ornare laoreet adipiscing luctus mauris adipiscing pretium eget fermentum, tristique lobortis est ut metus lobortis tortor tincidunt himenaeos habitant quis dictumst proin odio sagittis purus mi, nec taciti vestibulum quis in sit varius lorem sit metus mi.</p>
                  </div>
                  <div class="block-content block-content-full text-end bg-body">
                    <button type="button" class="btn btn-sm btn-primary" data-bs-dismiss="modal">Done</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- END Terms Modal -->
        </div>
        <!-- END Page Content -->
      </main>
      <!-- END Main Container -->
    </div>
      <!-- END Main Container -->
    </div>
    <!-- END Page Container -->

    <!--
      Dashmix JS

      Core libraries and functionality
      webpack is putting everything together at assets/_js/main/app.js
    -->
    <script src="{{ asset('assets/js/dashmix.app.min.js') }}"></script>

    <!-- jQuery (required for jQuery Validation plugin) -->
    <script src="{{ asset('assets/js/lib/jquery.min.js') }}"></script>

    <!-- Page JS Plugins -->
    <script src="{{ asset('assets/js/plugins/jquery-validation/jquery.validate.min.js') }}"></script>

    <!-- Page JS Code -->
    <script src="{{ asset('assets/js/pages/op_auth_signin.min.js') }}"></script>
     <script src="{{ asset('assets/js/plugins/select2/js/select2.full.min.js') }}"></script>
     <script>Dashmix.helpersOnLoad(['js-flatpickr', 'jq-datepicker', 'jq-maxlength', 'jq-select2', 'jq-rangeslider', 'jq-masked-inputs', 'jq-pw-strength']);</script>
  </body>
</html>
