@extends('layouts.layouts_ipad.layouts_Newipad')


@section('tophead')
    Scope Management
@endsection

@section('style')
<style>
    .form-select{
        padding: 1rem 0.9rem !important;
    }
    .form-control
    {
        padding: 16px .9rem      !important;
    }
    .fs-scope{
        font-size: 12px !important;
    }
</style>
@endsection

@section('content')

<div class="row p-3 pb-2">
    <div class="col-3">
        <input type="text" placeholder="Name, Serial..." class="form-control ">
    </div>
    <div class="col-3">
        <select class="form-select" aria-label="Default select example" id="select_type_scope" >
            <option value="Type" selected>Type</option>
        </select>
    </div>
    <div class="col-3">
        <select class="form-select " aria-label="Default select example" id="select_type_model">
            <option value="Type" selected>Model</option>
        </select>
    </div>
    <div class="col-3">
        <select class="form-select " aria-label="Default select example" id="select_type_brand">
            <option value="Type" selected>Brand</option>
        </select>
    </div>

</div>
<div class="row px-3 ">
    <div class="col-3">
        <select class="form-select" aria-label="Default select example" id="select_type_workingchannel">
            <option value="Type" selected>Working Channel</option>
        </select>
    </div>
    <div class="col-3">
        <select class="form-select" aria-label="Default select example" id="select_type_distalenddiameter" >
            <option value="Type" selected>Distal end Diameter</option>
        </select>
    </div>
    <div class="col-3">
        <select class="form-select " aria-label="Default select example" id="select_type_workinglength">
            <option value="Type" selected>Working Length</option>
        </select>
    </div>
    <div class="col-3">
        <select class="form-select " aria-label="Default select example" id="select_type_status" >
            <option value="Type" selected>Status</option>
        </select>
    </div>
</div>
<div class="col-12 text-center mt-3">
    <button class="btn btn-primary w-lg"> <i class="ri-filter-2-fill ri-1x "></i> Filter</button>
</div>
<div class="col-12 p-3 table-respondsive">
    <table class="table table-nowrap font-gray">
        <thead>
            <tr style="background: #121212;">
                <td>Status</td>
                <td>Type</td>
                <td>Name</td>
                <td>Model</td>
                <td>Serial No.</td>
                <td>Working Ch.</td>
                <td>Distal end Dia.</td>
                <td>Working Length</td>
            </tr>
        </thead>
        <tbody>
            @foreach ($tb_scope as $data2)
            @php
                $data = (object)$data2;
                $scope_s = $data->scope_status;
            @endphp
            <tr style="background: #25292D;">
                <td>
                    @if ($scope_s == 'available')
                    <span class="badge badge-soft-success fs-scope">AVAILABLE</span>
                    @endif
                    @if ($scope_s == 'using')
                    <span class="badge badge-soft-warning fs-scope">USING</span>
                    @endif
                    @if ($scope_s == 'disable')
                    <span style="color: #9599AD">DISABLE</span>
                    @endif
                    @if ($scope_s == 'reprocessing')
                    <span class="badge badge-soft-danger fs-scope">PRE-REPROCESSING</span>
                    @endif
                </td>
                <td>{{@$data->scope_type}}</td>
                <td>
                      <a href="{{url("tablet/showscope")}}" class="text-modal text-white"><u>{{@$data->scope_name}}</u> </a>
                 </td>
                <td>
                    <a class="text-modal  text-white">{{@$data->scope_model }}</a>
                </td>
                <td>{{@$data->scope_serial}}</td>
                <td>{{@$data->scope_working_channel}}</td>
                <td>{{@$data->scope_distal_end_diameter}}</td>
                <td>1030 mm</td>
            </tr>
            @endforeach



        </tbody>
    </table>
</div>
@endsection


@section('script')
<script>
  $(document).ready(function() {
        $('#select_type_scope').select2({
            placeholder: "Type",
            allowClear: true
        });

        $('#select_type_scope').on('select2:open', function(e) {
            $('.select2-dropdown').hide();
            setTimeout(function() {
                jQuery('.select2-dropdown').slideDown(300);
            });
        });

        $('#select_type_model').select2({
            placeholder: "Model",
            allowClear: true
        });

        $('#select_type_model').on('select2:open', function(e) {
            $('.select2-dropdown').hide();
            setTimeout(function() {
                jQuery('.select2-dropdown').slideDown(300);
            });
        });

        $('#select_type_brand').select2({
            placeholder: "Brand",
            allowClear: true
        });

        $('#select_type_brand').on('select2:open', function(e) {
            $('.select2-dropdown').hide();
            setTimeout(function() {
                jQuery('.select2-dropdown').slideDown(300);
            });
        });

        $('#select_type_workingchannel').select2({
            placeholder: "Working Channel",
            allowClear: true
        });

        $('#select_type_workingchannel').on('select2:open', function(e) {
            $('.select2-dropdown').hide();
            setTimeout(function() {
                jQuery('.select2-dropdown').slideDown(300);
            });
        });

        $('#select_type_distalenddiameter').select2({
            placeholder: "Distal end Diameter",
            allowClear: true
        });

        $('#select_type_distalenddiameter').on('select2:open', function(e) {
            $('.select2-dropdown').hide();
            setTimeout(function() {
                jQuery('.select2-dropdown').slideDown(300);
            });
        });

        $('#select_type_workinglength').select2({
            placeholder: "Working Length",
            allowClear: true
        });

        $('#select_type_workinglength').on('select2:open', function(e) {
            $('.select2-dropdown').hide();
            setTimeout(function() {
                jQuery('.select2-dropdown').slideDown(300);
            });
        });

        $('#select_type_status').select2({
            placeholder: "Status",
            allowClear: true
        });

        $('#select_type_status').on('select2:open', function(e) {
            $('.select2-dropdown').hide();
            setTimeout(function() {
                jQuery('.select2-dropdown').slideDown(300);
            });
        });

    });
</script>
@endsection
