@extends('tenant.layouts.agent-wfm')

{{--Tilte Section--}}
@section('title', 'OFF day Swap')

{{--Style Section--}}
@section('style')
    <!-- Css file for summernote js plugins  -->
<style>

</style>

@endsection

{{--Content Section--}}
@section('content')


<div class="container-fluid px-5">

    <div class="row p-3">
        <div class="card shadow p-3   rounded border border-0 ">
            <div class="card-body" style="padding: 6px 10px 6px 10px;">

              <div class="row">

                <div class="col-sm-9 p-2">
                  <div><h4><span>    <img src="{{asset('img/WFM/nav_menu_Icons/fill/swap.png')}}" alt="" style="width: 2%; margin-right:1%;" >Off Day Swap</h4></div>
                  <div id="fontStyle" >Create a swap between two agents an OFF day</div>
                </div>
            <div class="col-sm-3" style="margin:auto;">
                  <button id="button" type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#NewSwap" style="background-color: #00A34E ; width: 100%;height: 51px;margin-bottom: 2%"><span id="plusIcon" ><i class="fa-solid fa-right-left" style="color: #ffffff;"></i></span>  Swaps</button>
              </div>
            </div>

              </div>
            </div>
          </div>



              <!-- Card start -->
              <div class="row row-cols-1 row-cols-md-4 g-4 pt-3">
                <div class="col-12  col-md-12  col-lg-9">

                    <div class="card shadow p-3   rounded border border-0 h-100">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-12">Swap Details</div>
                            </div>
                            <hr>
                            <div class="row" >

                                <div class="col" style="text-align: center">
                                    <p class="card-title" style="font-size: small; font-weight: bold;">From Agent</p>

                                        <div class="dropdown" >

                                          <button id="dropDownLest" style="width: 75%;"  class="btn btn-light dropdown-toggle custom_arrow" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

                                            <span style="margin-right: 75%; ">Select</span>
                                          </button>
                                          <div id="dropdownMenu" class="dropdown-menu custom_arrow-dr" aria-labelledby="dropdownMenuButton">
                                            <a id="dropdownItem" class="dropdown-item" href="#"> Basel namser</a>
                                            <li><hr class="dropdown-divider"></li>
                                            <a id="dropdownItem" class="dropdown-item" href="#"> ahmad mohhamd </a>
                                            <li><hr class="dropdown-divider"></li>
                                            <a id="dropdownItem" class="dropdown-item" href="#"> sara khaled</a>
                                            <li><hr class="dropdown-divider"></li>
                                            <a id="dropdownItem" class="dropdown-item" href="#"> Noor Hussan</a>
                                            <a id="dropdownItem" class="dropdown-item" href="#"> Doaa Zaid </a>
                                            <li><hr class="dropdown-divider"></li>
                                            <a id="dropdownItem" class="dropdown-item" href="#"> rema shaker</a>
                                        </div>
                                        </div>

                                   <div class="card shadow p-3   rounded border border-0  h" style="width:75% ; text-align: center; margin-left: 13% ; margin-top: 20px;" >
                                    <div class="card-body">
                                    <img style="width: 20%; margin-bottom: 5%; " id="profileImage" src="{{asset('img/user_2.png')}}" class="card-img-top" alt="...">
                                    <p class="card-title" style=" font-weight: bold;">Basel abu isleem </p>
                                    <p class="card-text" style=" font-size: small;">basel@extensya.com</p>

                                    <hr>
                                    <p style="text-align: initial; font-size: small;">My OFF Day</p>
                                    <div class="row">
                                      <div class="col-sm-12 col-md-6 col-lg-6">
                                       <div style="text-align: initial;">
                                        <input style="accent-color: #00A34E;" type="checkbox" id="vehicle1" name="22-08-2023" value="22-08-2023">
                                        <label for="22-08-2023"  style="font-size: small;"> 22-08-2023</label><br>
                                        <input style="accent-color: #00A34E;" type="checkbox" id="22-09-2023" name="22-09-2023" value="22-09-2023">
                                        <label for="22-09-2023"  style="font-size: small;">22-09-2023</label><br>
                                       </div>
                                      </div>
                                      <div class="col-sm-12 col-md-6 col-lg-6">
                                       <div style="text-align: initial;">
                                        <input style="accent-color: #00A34E;" type="checkbox" id="14-09-2023" name="14-09-2023" value="14-09-2023">
                                        <label for="14-09-2023"  style="font-size: small;">14-09-2023</label><br>
                                        <input style="accent-color: #00A34E;" type="checkbox" id="04-09-2023" name="04-09-2023" value="04-09-2023">
                                        <label for="04-09-2023" style="font-size: small;">04-09-2023</label><br>
                                       </div>
                                      </div>
                                    </div>
                                    </div>
                                   </div>

                                </div>
                              <div class="col-1">
                                <div class="d-flex" style="height: 350px; margin-left: 30px;">

                                    <div class="vr">


                                    </div>
                                    <img src="{{asset('img/WFM/nav_menu_Icons/fill/swap.png')}}" alt="" width="25px" height="25px" style="margin: 160px 0px 0px -14px;;">
                                  </div>
                              </div>
                                <div class="col" style="text-align: center">
                                    <p class="card-title" style="font-size: small; font-weight: bold;">To Agent</p>


                                   <div>
                                    <div class="dropdown" >

                                      <button id="dropDownLest" style="width: 75%;"  class="btn btn-light dropdown-toggle custom_arrow" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

                                        <span style="margin-right: 75%; ">Select</span>
                                      </button>
                                      <div id="dropdownMenu" class="dropdown-menu custom_arrow-dr" aria-labelledby="dropdownMenuButton">
                                        <a id="dropdownItem" class="dropdown-item" href="#"> Basel namser</a>
                                        <li><hr class="dropdown-divider"></li>
                                        <a id="dropdownItem" class="dropdown-item" href="#"> ahmad mohhamd </a>
                                        <li><hr class="dropdown-divider"></li>
                                        <a id="dropdownItem" class="dropdown-item" href="#"> sara khaled</a>
                                        <li><hr class="dropdown-divider"></li>
                                        <a id="dropdownItem" class="dropdown-item" href="#"> Noor Hussan</a>
                                        <li><hr class="dropdown-divider"></li>
                                        <a id="dropdownItem" class="dropdown-item" href="#"> Doaa Zaid </a>
                                        <li><hr class="dropdown-divider"></li>
                                        <a id="dropdownItem" class="dropdown-item" href="#"> rema shaker</a>
                                    </div>
                                    </div>
                                    <div class="card shadow p-3   rounded border border-0 " style="width:75% ; text-align: center; margin-left: 13% ; margin-top: 20px;">
                                      <div class="card-body">


                                        <img src="{{asset('img/WFM/noSelected/swap-agent-page.png')}}" alt="" style="margin: 50px 0px 0px -17px;;">
                                        <h4 style="margin-bottom: revert;">No Agent Selected ..!</h4>



<!--
                                      <img style="width: 20%; margin-bottom: 5%; " id="profileImage" src="/images/iDesk_Assets/user.png" class="card-img-top" alt="...">
                                      <p class="card-title" style=" font-weight: bold;">Basel abu isleem </p>
                                      <p class="card-text" style=" font-size: small;">basel@extensya.com</p>

                                      <hr>
                                      <p style="text-align: initial; font-size: small;">My OFF Day</p>
                                      <div class="row">
                                        <div class="col-sm-12 col-md-6 col-lg-6">
                                         <div style="text-align: initial;">
                                          <input style="accent-color: #00A34E;" type="checkbox" id="vehicle1" name="22-08-2023" value="22-08-2023">
                                          <label for="22-08-2023"> 22-08-2023</label><br>
                                          <input style="accent-color: #00A34E;" type="checkbox" id="22-09-2023" name="22-09-2023" value="22-09-2023">
                                          <label for="22-09-2023">22-09-2023</label><br>
                                         </div>
                                        </div>
                                        <div class="col-sm-12 col-md-6 col-lg-6">
                                         <div style="text-align: initial;">
                                          <input style="accent-color: #00A34E;" type="checkbox" id="14-09-2023" name="14-09-2023" value="14-09-2023">
                                          <label for="14-09-2023">14-09-2023</label><br>
                                          <input style="accent-color: #00A34E;" type="checkbox" id="04-09-2023" name="04-09-2023" value="04-09-2023">
                                          <label for="04-09-2023">04-09-2023</label><br>
                                         </div>
                                        </div>
                                      </div> -->
                                      </div>
                                     </div>
                                   </div>


                                </div>
                            </div>
                        </div>
                      </div>
                </div>


                <div class="col-12  col-md-12  col-lg-3">
                  <div class="card shadow p-3   rounded border border-0 h-100">
                    <div class="card-body">
                      <div class="row" style="margin-bottom:2%;" >
                        <div class="col-12">
                            <h5>Expired At</h5>
                        </div>
                        <hr>
                        </div>

                        <form >
                          <div style="margin: 3% 0% 3% 0%;" class="col-sm-12">

                            <input type="date" id="dateInputStyle">
                          </div>
                        </form>

                        <div class="row" >
                            <div class="col-12" style="margin:15% 0% 0% 0%;">
                                <h5>Comment</h5>

                            </div>
                      </div>
                      <hr>
                    <form >
                      <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Comment here.."></textarea>
                    </form>
                    </div>
                    <div   style="text-align: center; margin: 10% 0% 10% 0%;; " >
                        <button type="button" id="ApplytButton" class="btn">Submit</button>
                        </div>
                  </div>
                </div>

            <!--  Card end -->








    <!-- View popup start-->
    <div class="modal fade" id="View" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true" >
      <div class="modal-dialog modal-dialog-centered" role="document"   >
        <div class="modal-content" >
          <div class="modal-header" id="modalHeader">
            <h5 class="modal-title" id="exampleModalLongTitle">Show Incoming Request Data</h5>

            <i aria-hidden="true" type="button" data-bs-dismiss="modal" aria-label="Close"><img width="35px" src="{{asset('img/remove.png')}}" alt="" ></i>

          </div>
          <div class="modal-body">
            <div class="card-body">
                <div class="row">
                    <div class="col-12" style="text-align:center;">
                        <h4><span id="ShiftBCIcon"> BC </span> BC Shift</h4>
                    </div>
                </div>
                <div class="row"  >
                    <div class="col" style="text-align: center">
                        <p class="card-title" style="font-size: small; font-weight: bold;">From</p>

                        <img style="width: 30%; " id="profileImage" src="/images/iDesk_Assets/user.png" class="card-img-top" alt="...">
                        <p class="card-title" style="font-size: small; font-weight: bold;">Basel abu isleem </p>
                        <p class="card-text" style="color: #00A34E; font-size: small;">friday 08/08/2023 15:00 - 00:00</p>

                    </div>
                  <div class="col-1">
                    <div class="d-flex" style="height: 150px;">

                        <div class="vr">
                            <img src="/images/iDesk_Assets/social.png" alt="" style="margin: 50px 0px 0px -17px;;">
                        </div>
                      </div>
                  </div>
                    <div class="col" style="text-align: center">
                        <p class="card-title" style="font-size: small; font-weight: bold;">To</p>
                        <img style="width: 30%;" id="profileImage" src="/images/iDesk_Assets/user.png" class="card-img-top" alt="...">

                          <p class="card-title" style="font-size: small; font-weight: bold;">Basel abu isleem </p>
                          <p class="card-text" style="color: #00A34E; font-size: small;">friday 08/08/2023 15:00 - 00:00</p>

                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6" style="margin: 1% 0% 1% 0%;">
                        <label for="Year" class="dropDownLabel">Type</label>
                        <div class="dropdown">
                          <button id="dropDownLest" class="btn btn-light dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <span style="margin-right: 70%;">Select</span>
                          </button>
                          <div id="dropdownMenu" class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                            <a id="dropdownItem" class="dropdown-item" href="#">Single Day </a>
                            <a id="dropdownItem" class="dropdown-item" href="#">Multi DAy</a>


                          </div>
                        </div>
                        </div>
                    <div style="margin: 1% 0% 1% 0%;" class="col-sm-6">
                        <label for="Year" class="dropDownLabel">Date From</label>
                        <input type="date" name="DateFrom" style="border: 1px solid rgb(172, 172, 172);padding: 10px;border-radius: 10px;     width: 100%;">
                      </div>
                   </div>
                </div>
               <div style="margin: 2% 0% 2% 0%;" class="col-sm-12">
                <label for="Year" class="dropDownLabel">Comment</label>
                <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Comment here.."></textarea>
              </div>


          </div>

          <div   id="buttonGroupinPopUp" >

          <button type="button" id="closeButton"  class="btn" data-dismiss="modal">Close</button>


          <button type="button" id="closeButton"  class="btn" data-bs-dismiss="modal">Close</button>


          </div>
        </div>
      </div>
    </div>
    <!-- View popup end-->

</div>

@endsection

{{--Script Section--}}
@section('script')
<script>


</script>

@endsection