@extends('layouts.layouts_ipad.layouts_Newipad')


@section('tophead')
    Scope Management
@endsection

@section('style')
<style>
    .font-gray-solid{
        color: #bbbbbb;
        text-decoration-style: solid;
    }

    .table-scope tr td:nth-child(1){width: 25%;}
    .table-scope tr td:nth-child(2){width: 25%;}
    .table-scope tr td:nth-child(3){width: 25%;}
    .table-scope tr td:nth-child(4){width: 25%;}

    .table-repair tr td:nth-child(1){width: 20%;}
    .table-repair tr td:nth-child(2){width: 70%;}
    .table-repair tr td:nth-child(3){width: 10%;}


    .table-preven tr td:nth-child(1){width: 20%;}
    .table-preven tr td:nth-child(2){width: 10%;}
    .table-preven tr td:nth-child(3){width: 30%;}
    .table-preven tr td:nth-child(4){width: 30%;}
    .table-preven tr td:nth-child(5){width: 10%;}

    .table-train tr td:nth-child(1){width: 10%;}
    .table-train tr td:nth-child(2){width: 40%;}
    .table-train tr td:nth-child(3){width: 5%;}
    .table-train tr td:nth-child(4){width: 20%;}
    .table-train tr td:nth-child(5){width: 15%;}

    .pb-8{
        padding-bottom: 7.2em !important;
    }
    th , td {
        border: 1px solid #353535 !important;
    }

</style>
@endsection

@section('content')
<div class="row p-3">
    <div class="col-4 p-0 card-ipad mb-0">
        <div class="p-3 font-gray-solid border-bottom-solid ">
            Scope Detail
        </div>
        <div class="col-12 p-3">
            <div class="d-flex justify-content-between">
                <span class="font-gray">Name: </span>
                <span class="font-gray-solid">G01 &ensp; &ensp;</span>

            </div>
            <div class="d-flex justify-content-between mt-2">
                <span class="font-gray">Serial Number : </span>
                <span class="font-gray-solid">123535343 &ensp; &ensp;</span>

            </div>
            <div class="d-flex justify-content-between mt-2">
                <span class="font-gray">Type : </span>
                <span class="font-gray-solid">Gastroscope &ensp; &ensp;</span>

            </div>
            <div class="d-flex justify-content-between mt-2 ">
                <span class="font-gray">Model : </span>
                <span class="font-gray-solid">GIF-HQ190 &ensp; &ensp;</span>

            </div>
            <div class="d-flex justify-content-between mt-2">
                <span class="font-gray">Brand : </span>
                <span class="font-gray-solid">Olympus &ensp; &ensp;</span>

            </div>
        </div>
    </div>
    <div class="col-4 py-0">
        <div class="row ">
            <div class="col-12 ">
                <div class="card p-3 bg-warning mb-1">
                    <div class="d-flex justify-content-between mb-2">
                        <div class="">
                            <p class=" mb-0 text-white ">Status</p>
                            <h2 class="mt-3 ff-secondary text-white">USING</h2>
                            <p class="mb-0 text-white">3 times in this week</p>
                        </div>
                        <div>
                            <div class="avatar-sm flex-shrink-0">
                                <span class="avatar-title bg-soft-warning text-white rounded-circle fs-2">
                                    <i class="ri-camera-lens-fill"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 mt-2">
                <div class="card-ipad p-3">
                    <div class="d-flex justify-content-between">
                        <div class="font-gray">
                            <p class="mb-0 ">Location</p>
                            <h2 class="mt-3 font-gray">Endoscopy Room 1</h2>
                            <p class="mb-0 ">2 times in this week</p>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-4 p-0  font-gray">
        <div class="row">
            <div class="col-12">
                <div class="card-ipad">
                    <div class="p-3 font-gray-solid border-bottom-solid ">
                        Repair Analysis
                    </div>
                    <div class="card-body border-bottom-solid p-3 pb-8" >
                        <div class="col-12 d-flex justify-content-between">
                            <span>Angulation knob is loose</span>
                            <span>2</span>
                        </div>
                        <div class="col-12 d-flex justify-content-between">
                            <span>Objective lens was broken</span>
                            <span>1</span>
                        </div>
                        <div class="col-12 d-flex justify-content-between">
                            <span>Instrument Channel leak</span>
                            <span>1</span>
                        </div>

                    </div>
                    <div class="col-12 p-3 d-flex justify-content-between">
                        <span>Total &ensp; 766,400.- </span>
                        <span>4 Times</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row card-ipad mx-2">
    <div class="col-12 px-0 pt-3 mb-3" >
        <div class="font-gray-solid px-3  card-ipad">
            Scope Activity (4)
        </div>
        <div class="border-bottom-solid mt-2"></div>
    </div>
    <div class="col-12 px-4 table-responsive">
        <table class="table table-bordered table-nowrap font-gray table-scope">
            <thead>
                <tr style="background: #121212;">
                    <td scope="col">Date/Time</td>
                    <td scope="col">Status</td>
                    <td scope="col">User</td>
                    <td scope="col">Location</td>
                </tr>
            </thead>
            <tbody>
                <tr style="background: #222529;">
                    <td scope="row fw-normal">16-12-2022  09:00</td>
                    <td>
                        <span class="badge badge-soft-warning">USING</span>
                    </td>
                    <td>นพ.สดายุ ทองลอย</td>
                    <td>
                        Endoscopy Room 1
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<div class="row card-ipad mx-2 mt-1">
    <div class="col-12 px-0 pt-3 mb-3" >
        <div class="font-gray-solid px-3  card-ipad">
            Repair (1)
        </div>
        <div class="border-bottom-solid mt-2"></div>
    </div>
    <div class="col-12 px-4 table-responsive">
        <table class="table table-bordered table-nowrap font-gray table-repair">
            <thead>
                <tr style="background: #121212;">
                    <td scope="col">Broken Date</td>
                    <td scope="col">Main Phenomenon</td>
                    <td scope="col">Bring back</td>
                    <td scope="col">Repair price</td>
                    <td scope="col">Return date</td>
                    <td scope="col">Status</td>
                </tr>
            </thead>
            <tbody>
                <tr style="background: #222529;">
                    <td scope="row fw-normal">15-12-2022</td>
                    <td>
                        Objective lens broken, Water inside Instrument ch. leak
                    </td>
                    <td scope="row fw-normal">16-12-2022</td>

                    <td>650,000.-</td>
                    <td></td>
                    <td><span class="badge badge-soft-warning">IN PROGRESS</span> </td>


                </tr>
            </tbody>
        </table>
    </div>
</div>

<div class="row card-ipad mx-2 mt-1">
    <div class="col-12 px-0 pt-3 mb-3" >
        <div class="font-gray-solid px-3  card-ipad">
            Preventive Maintenance (2)
        </div>
        <div class="border-bottom-solid mt-2"></div>
    </div>
    <div class="col-12 px-4 table-responsive">
        <table class="table table-bordered table-nowrap font-gray table-preven">
            <thead>
                <tr style="background: #121212;">
                    <td scope="col">PM Date</td>
                    <td scope="col">Result</td>
                    <td scope="col">Main Phenomenon</td>
                    <td scope="col">Suggestion Detail</td>
                </tr>
            </thead>
            <tbody>
                <tr style="background: #222529;">
                    <td scope="row">16-12-2022  09:00</td>
                    <td>OK</td>
                    <td>-</td>
                    <td>-</td>

                </tr>
            </tbody>
        </table>
    </div>
</div>

<div class="row card-ipad mx-2 mt-1">
    <div class="col-12 px-0 pt-3 mb-3" >
        <div class="font-gray-solid px-3  card-ipad">
            Training (2)
        </div>
        <div class="border-bottom-solid mt-2"></div>
    </div>
    <div class="col-12 px-4 table-responsive">
        <table class="table table-bordered table-nowrap font-gray table-train">
            <thead>
                <tr style="background: #121212;">
                    <td scope="col">Training date</td>
                    <td scope="col">Topic</td>
                    <td scope="col">Trainee</td>
                    <td scope="col">Trainer</td>
                </tr>
            </thead>
            <tbody>
                <tr style="background: #222529;">
                    <td scope="row">15-12-2022</td>
                    <td>Using, CDS and Caution training</td>
                    <td>-</td>
                    <td>-</td>

                </tr>
            </tbody>
        </table>
    </div>
</div>
<div class="p-3"  >
    <input type="hidden" name="" id="">
</div>
@endsection
