@extends('layouts.seller')
@section('css')
<style>
    .highlight-today {
        padding: 3px;
        margin: 2px;
        background-color: #2b3746;
        color: #fff;
    }
</style>
{{-- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" /> --}}
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/daterangepicker.css') }}" />
{{-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dripicons/2.0.0/webfont.css" /> --}}
<link rel="stylesheet" href="{{ asset('assets/css/drip-icons.css') }}" />
<link rel="stylesheet" href="{!! asset('assets/css/schedule.css') !!}" />
@endsection

@section('content')
    @include('layouts.partials.messages')

    <div class="page-header text-uppercase">
        <ul class="list-unstyled space-list m-0">
            <li>
                <p>{{ __('schedule.schedules') }}</p>

            </li>
            <li>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{!! route('seller.dashboard', getStoreSlug()) !!}">{!! __('common.home') !!}</a></li>
                        <li class="breadcrumb-item active" aria-current="page">{!! __('schedule.schedule') !!}</li>
                    </ol>
                </nav>
            </li>
        </ul>
    </div>
    <div class="admin-area-col">
        <!-- End Navigation Bar-->
        <div class="wrapper">
            <!-- Start Filter -->
            <div class="custom-filter">
                <div class="filter-own-toggler">
                    <i class="dripicons-chevron-left"></i>
                </div>
                <div class="cf-head">
                    <h6>{!! __('schedule.filters') !!}</h6>
                    <span id="reset-filter">{!! __('schedule.reset_all') !!}</span>
                </div>

                <div class="cf-categories" id="accordion">
                    {!! Form::open(array('route' => 'schedule.load-shifts', 'method' => 'POST' ,'id' => 'ajax-filter','files' => true)) !!}
                    <div class="card">
                        <div class="card-header" id="headingOne">
                            <p class="cf-cat-head" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false"
                                aria-controls="collapseOne">{!! __('schedule.shift_times') !!}<i class="fa fa-angle-down"></i></p>
                        </div>
                        <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
                            <div class="card-body">
                                <div class="from-to-form">
                                    <input type="text" class="form-control t-picker from-time" name="from_tm"
                                        placeholder="From">
                                    <input type="text" class="form-control t-picker to-time" name="to_tm"
                                        placeholder="To">
                                    <div class="addon-sc filter-sc"> <i class="fa fa-check-circle"></i></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-header" id="headingTwo">
                            <p class="cf-cat-head" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false"
                                aria-controls="collapseTwo">{!! __('schedule.status') !!}<i class="fa fa-angle-down"></i></p>
                        </div>
                        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
                            <div class="card-body">
                                <ul class="nested-checkbox-wrap">
                                    <li>
                                        <input type="checkbox" class="styled-checkbox sch-filter" name="status[]"
                                            value="0">
                                        <label for="open"><span class="cf-indicate"
                                                style="background-color: #d9425a;"></span>{!! __('schedule.open') !!}</label>
                                    </li>
                                    <li>
                                        <input type="checkbox" class="styled-checkbox sch-filter" name="status[]"
                                            value="1">
                                        <label for="assign"><span class="cf-indicate"
                                                style="background-color: #dddddd;"></span>{!! __('schedule.assigned') !!}</label>
                                    </li>
                                    <li>
                                        <input type="checkbox" class="styled-checkbox sch-filter" name="status[]"
                                            value="2">
                                        <label for="approve"><span class="cf-indicate"
                                                style="background-color: #0dc05f;"></span>{!! __('schedule.approved') !!}</label>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-header" id="headingThree">
                            <p class="cf-cat-head" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false"
                                aria-controls="collapseThree">{!! __('schedule.shift_type') !!}<i class="fa fa-angle-down"></i></p>
                        </div>
                        <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
                            <div class="card-body">
                                <div class="common-type-search">
                                    <input type="search" placeholder="search" class="form-control live-search"
                                        data-target="search-sft-for">
                                    <i class="fa fa-search"></i>
                                </div>
                                <ul class="nested-checkbox-wrap" id="search-sft-for">
                                    <li>
                                        <input type="checkbox" class="styled-checkbox sch-filter" id="st-all"
                                            value="-1" name="shift_type[]">
                                        <label for="st-all">{!! __('schedule.all') !!}</label>
                                        <ul>